Skip to content

Commit 992ec5f

Browse files
aholachekaholachek
committed
use tween.js for better transforms
1 parent 02c798b commit 992ec5f

File tree

7 files changed

+130
-104
lines changed

7 files changed

+130
-104
lines changed

‎README.md

Lines changed: 13 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22

33
![demo of animate-css-grid in action](./demo/grid.gif)
44

5-
This small (1.6kb minified and gzipped) script wraps a CSS grid (or really, any container element) and animates updates to its children.
5+
This small (4kb minified and gzipped) script wraps a CSS grid (or really, any container element) and animates updates to its children.
66
When the grid container, or one of its immediate children, is updated via the addition or removal of a class, the grid will smoothly transition its children to their new positions and sizes.
77

88
[Example on Codepen](https://codepen.io/aholachek/pen/VXjOPB)
@@ -18,7 +18,9 @@ import { wrapGrid } from animateCSSGrid
1818
const grid = document.querySelector(".grid");
1919

2020
const { unwrapGrid } = wrapGrid(grid, {
21+
// create a stagger effect
2122
stagger: true,
23+
// specify a duration (default is 300 ms)
2224
duration: 300
2325
});
2426

@@ -32,10 +34,7 @@ Or from a script tag:
3234

3335
<script>
3436
const grid = document.querySelector(".grid");
35-
const { unwrapGrid } = animateCSSGrid.wrapGrid(grid, {
36-
stagger: true,
37-
duration: 300
38-
});
37+
const { unwrapGrid } = animateCSSGrid.wrapGrid(grid);
3938
</script>
4039
```
4140

@@ -54,12 +53,12 @@ OK:
5453
```html
5554
<div class="some-grid-class-that-changes">
5655

57-
<div class="grid-item">
58-
<div>
59-
...child 1
60-
...child 2
56+
<div class="grid-item">
57+
<div>
58+
...child 1
59+
...child 2
60+
</div>
6161
</div>
62-
</div>
6362

6463
<div>
6564
```
@@ -68,10 +67,10 @@ Not going to work:
6867
```html
6968
<div style="[grid styles that change]">
7069

71-
<div class="grid-item">
72-
...child 1
73-
...child 2
74-
</div>
70+
<div class="grid-item">
71+
...child 1
72+
...child 2
73+
</div>
7574

7675
<div>
7776
```

‎demo/index.css

Lines changed: 50 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -1,97 +1,98 @@
11
/* layout */
22

33
.grid {
4-
display: grid;
5-
grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
6-
grid-template-rows: minmax(15rem, 1fr);
7-
grid-auto-rows: 1fr;
8-
grid-gap: 1rem;
9-
grid-auto-flow: dense;
4+
display: grid;
5+
grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
6+
grid-template-rows: minmax(15rem, 1fr);
7+
grid-auto-rows: 1fr;
8+
grid-gap: 1rem;
9+
grid-auto-flow: dense;
1010
}
1111

1212
.grid--full {
13-
grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
14-
grid-template-rows: minmax(9rem, 1fr);
13+
grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
14+
grid-template-rows: minmax(9rem, 1fr);
1515
}
1616

1717
/* styling */
1818

1919
.card--expanded {
20-
grid-column: span 2;
21-
grid-row: span 2;
20+
grid-column: span 2;
21+
grid-row: span 2;
2222
}
2323

2424
.card {
25-
cursor: pointer;
26-
display: flex;
27-
justify-content: center;
28-
align-items: center;
29-
padding: 1rem;
25+
cursor: pointer;
26+
display: flex;
27+
justify-content: center;
28+
align-items: center;
29+
padding: 1rem;
3030
}
3131

32-
.card>div {
33-
display: flex;
34-
flex-direction: column;
35-
justify-content: center;
36-
align-items: center;
32+
.card > div {
33+
display: flex;
34+
flex-direction: column;
35+
justify-content: center;
36+
align-items: center;
3737
}
3838

3939
.card__avatar {
40-
height: 6rem;
41-
width: 6rem;
42-
border-radius: 100%;
43-
background-color: hsla(0, 0%, 0%, 0.2);
44-
margin-bottom: 1rem;
40+
height: 6rem;
41+
width: 6rem;
42+
border-radius: 100%;
43+
background-color: hsla(0, 0%, 0%, 0.2);
44+
margin-bottom: 1rem;
4545
}
4646

4747
.card__title {
48-
height: 1rem;
49-
width: 7rem;
50-
background-color: hsla(0, 0%, 0%, 0.6);
51-
margin-bottom: 1rem;
48+
height: 1rem;
49+
width: 7rem;
50+
background-color: hsla(0, 0%, 0%, 0.6);
51+
margin-bottom: 1rem;
5252
}
5353

5454
.card__description {
55-
height: 2rem;
56-
width: 11rem;
57-
background-color: hsla(0, 0%, 0%, 0.2);
55+
height: 2rem;
56+
width: 11rem;
57+
background-color: hsla(0, 0%, 0%, 0.2);
5858
}
5959

60-
.card:nth-of-type(1n) {
61-
background-color: #366f6e;
60+
.card--1 {
61+
background-color: #366f6e;
6262
}
6363

64-
.card:nth-of-type(2n) {
65-
background-color: #79ac91;
64+
.card--2 {
65+
background-color: #79ac91;
6666
}
6767

68-
.card:nth-of-type(7n) {
69-
background-color: #e2b060;
68+
.card--3 {
69+
background-color: #e2b060;
7070
}
7171

72-
.card:nth-of-type(4n) {
73-
background-color: #e86448;
72+
.card--4 {
73+
background-color: #e86448;
7474
}
7575

76-
.card:nth-of-type(6n) {
77-
background-color: #dc5263;
76+
.card--5 {
77+
background-color: #dc5263;
7878
}
7979

8080
body {
81-
background-color: #191919;
82-
color: lightgray;
83-
font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", "Roboto", "Helvetica Neue", Arial, sans-serif;
84-
min-height: 200vh;
81+
background-color: #191919;
82+
color: lightgray;
83+
font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI",
84+
"Roboto", "Helvetica Neue", Arial, sans-serif;
85+
min-height: 200vh;
8586
}
8687

8788
.mb-4 {
88-
margin-bottom: 1rem;
89+
margin-bottom: 1rem;
8990
}
9091

9192
.p-4 {
92-
padding: 1rem;
93+
padding: 1rem;
9394
}
9495

9596
button {
96-
padding: .5rem;
97+
padding: 0.5rem;
9798
}

‎demo/index.html

Lines changed: 11 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -20,56 +20,56 @@
2020

2121
<div class="grid">
2222

23-
<div class="card">
23+
<div class="card card--1">
2424
<div>
2525
<div class="card__avatar"></div>
2626
<div class="card__title"></div>
2727
<div class="card__description"></div>
2828
</div>
2929
</div>
30-
<div class="card">
30+
<div class="card card--5">
3131
<div>
3232
<div class="card__avatar"></div>
3333
<div class="card__title"></div>
3434
<div class="card__description"></div>
3535
</div>
3636
</div>
37-
<div class="card">
37+
<div class="card card--2">
3838
<div>
3939
<div class="card__avatar"></div>
4040
<div class="card__title"></div>
4141
<div class="card__description"></div>
4242
</div>
4343
</div>
44-
<div class="card">
44+
<div class="card card--3">
4545
<div>
4646
<div class="card__avatar"></div>
4747
<div class="card__title"></div>
4848
<div class="card__description"></div>
4949
</div>
5050
</div>
51-
<div class="card">
51+
<div class="card card--2">
5252
<div>
5353
<div class="card__avatar"></div>
5454
<div class="card__title"></div>
5555
<div class="card__description"></div>
5656
</div>
5757
</div>
58-
<div class="card">
58+
<div class="card card--4">
5959
<div>
6060
<div class="card__avatar"></div>
6161
<div class="card__title"></div>
6262
<div class="card__description"></div>
6363
</div>
6464
</div>
65-
<div class="card">
65+
<div class="card card--3">
6666
<div>
6767
<div class="card__avatar"></div>
6868
<div class="card__title"></div>
6969
<div class="card__description"></div>
7070
</div>
7171
</div>
72-
<div class="card">
72+
<div class="card card--1">
7373
<div>
7474
<div class="card__avatar"></div>
7575
<div class="card__title"></div>
@@ -89,9 +89,10 @@
8989
document
9090
.querySelector(".js-add-card")
9191
.addEventListener("click", () => {
92-
grid.insertAdjacentHTML('afterbegin',
92+
const randomNumber = Math.floor(Math.random() * 5) + 1
93+
grid.insertAdjacentHTML('beforeend',
9394
`
94-
<div class="card">
95+
<div class="card card--${randomNumber}">
9596
<div>
9697
<div class="card__avatar"></div>
9798
<div class="card__title"></div>

0 commit comments

Comments
 (0)