Skip to content

Commit 282ae7a

Browse files
juliangarnierjuliangarnier
committed
Merge branch 'v3.1.0'
2 parents c8dacab + 5e52c78 commit 282ae7a

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

47 files changed

+882
-3103
lines changed

‎README.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -37,13 +37,13 @@ or manual [download](https://github.com/juliangarnier/anime/archive/master.zip).
3737
#### ES6 modules
3838

3939
```javascript
40-
import anime from 'lib/anime.es.js';
40+
import anime from 'animejs/lib/anime.es.js';
4141
```
4242

4343
#### CommonJS
4444

4545
```javascript
46-
const anime = require('lib/anime.js');
46+
const anime = require('anime');
4747
```
4848

4949
#### File include

‎documentation/assets/css/animejs.css

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -63,7 +63,6 @@
6363
margin: 0;
6464
padding: 0;
6565
border: 0;
66-
font-size: 100%;
6766
font: inherit;
6867
vertical-align: baseline;
6968
}

‎documentation/assets/css/documentation.css

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -367,7 +367,6 @@ article {
367367
z-index: 1;
368368
display: flex;
369369
align-items: center;
370-
flex-pack: center;
371370
justify-content: center;
372371
width: 100%;
373372
min-height: 200px;

‎documentation/assets/css/website.css

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -114,7 +114,6 @@ a:hover .arrow:before,
114114
.nav-bar-content {
115115
display: flex;
116116
flex-shrink: 0;
117-
flex-direction: row;
118117
grid-column: 1/13;
119118
justify-content: space-between;
120119
flex-direction: row;

‎documentation/assets/js/website.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -235,7 +235,7 @@ var logoAnimation = (function() {
235235
targets: '.dot',
236236
scale: 1,
237237
rotate: '1turn',
238-
scaleY: {value: .5, delay: 0, duration: 150, delay: 230},
238+
scaleY: {value: .5, duration: 150, delay: 230},
239239
translateX: 430,
240240
translateY: [
241241
{value: 244, duration: 100},

‎documentation/examples/advanced-staggering-2.html

Lines changed: 100 additions & 90 deletions
Original file line numberDiff line numberDiff line change
@@ -13,13 +13,14 @@
1313
<meta name="twitter:site" content="@juliangarnier">
1414
<meta name="twitter:description" content="Javascript Animation Engine">
1515
<meta name="twitter:image" content="https://animejs.com/documentation/assets/img/icons/twitter.png">
16-
<link rel="apple-touch-icon-precomposed" href="../assets/img/icons/apple-touch-icon.png">
17-
<link rel="icon" type="image/png" href="../assets/img/icons/favicon.png" >
16+
<link rel="apple-touch-icon-precomposed" href="../assets/img/social-media-image.png">
17+
<link rel="icon" type="image/png" href="../assets/img/favicon.png" >
1818
<link href="../assets/css/animejs.css" rel="stylesheet">
19+
<link href="../assets/css/documentation.css" rel="stylesheet">
1920
<style>
2021

2122
:root {
22-
font-size: 24px;
23+
font-size: 20px;
2324
}
2425

2526
body {
@@ -28,121 +29,130 @@
2829
justify-content: center;
2930
align-items: center;
3031
height: 100vh;
32+
background-color: #000;
3133
}
3234

3335
.stagger-visualizer {
36+
display: flex;
37+
flex-wrap: wrap;
38+
justify-content: center;
39+
align-items: center;
3440
position: relative;
41+
width: 32rem;
42+
height: 16rem;
43+
}
44+
45+
.dots-wrapper {
46+
position: absolute;
3547
display: flex;
3648
flex-wrap: wrap;
3749
justify-content: center;
3850
align-items: center;
3951
width: 100%;
40-
max-width: 912px;
41-
transform: translate3d(0,0,0);
52+
height: 100%;
4253
}
4354

4455
.stagger-visualizer .dot {
4556
position: relative;
46-
width: 2px;
47-
height: 2px;
48-
margin: 18px;
49-
background-color: currentColor;
50-
}
51-
52-
.stagger-visualizer .cursor {
53-
position: absolute;
54-
z-index: 1;
55-
top: 0;
56-
left: 0;
57-
width: 24px;
58-
height: 24px;
59-
margin: 7px;
60-
background-color: currentColor;
57+
width: calc(1rem - 8px);
58+
height: calc(1rem - 8px);
59+
margin: 4px;
6160
border-radius: 50%;
61+
background-color: currentColor;
6262
}
6363

6464
</style>
6565
</head>
6666
<body>
6767

6868
<div class="stagger-visualizer">
69-
<div class="cursor color-red"></div>
69+
<div class="dots-wrapper"></div>
7070
</div>
7171

7272
</body>
7373
<script type="module">
7474

7575
import anime from '../../src/index.js';
7676

77-
const staggerVisualizerEl = document.querySelector('.stagger-visualizer');
78-
const fragment = document.createDocumentFragment();
79-
const numberOfElements = 24*11;
80-
81-
for (let i = 0; i < numberOfElements; i++) {
82-
const dotEl = document.createElement('div');
83-
dotEl.classList.add('dot');
84-
fragment.appendChild(dotEl);
85-
}
86-
87-
staggerVisualizerEl.appendChild(fragment);
88-
89-
let index = anime.random(0, numberOfElements);
90-
let nextIndex = 0;
91-
92-
function animateGrid() {
93-
94-
nextIndex = anime.random(0, numberOfElements);
95-
96-
anime.set('.cursor', {
97-
translateX: anime.stagger('-38px', {grid: [24, 11], from: index, axis: 'x'}),
98-
translateY: anime.stagger('-38px', {grid: [24, 11], from: index, axis: 'y'})
99-
});
100-
anime.timeline({
101-
easing: 'easeInOutQuad',
102-
complete: animateGrid
103-
})
104-
.add({
105-
targets: '.cursor',
106-
keyframes: [
107-
{ scale: .625 },
108-
{ scale: 1.125 },
109-
{ scale: 1 }
110-
],
111-
duration: 600
112-
})
113-
.add({
114-
targets: '.dot',
115-
keyframes: [
116-
{
117-
translateX: anime.stagger('-4px', {grid: [24, 11], from: index, axis: 'x'}),
118-
translateY: anime.stagger('-4px', {grid: [24, 11], from: index, axis: 'y'}),
119-
duration: 200
120-
}, {
121-
translateX: anime.stagger('4px', {grid: [24, 11], from: index, axis: 'x'}),
122-
translateY: anime.stagger('4px', {grid: [24, 11], from: index, axis: 'y'}),
123-
scale: anime.stagger([9, 2], {grid: [24, 11], from: index}),
124-
duration: 400
125-
}, {
126-
translateX: 0,
127-
translateY: 0,
128-
scale: 1,
129-
duration: 600,
130-
}
131-
],
132-
delay: anime.stagger(30, {grid: [24, 11], from: index})
133-
}, '-=600')
134-
.add({
135-
targets: '.cursor',
136-
translateX: { value: anime.stagger('-38px', {grid: [24, 11], from: nextIndex, axis: 'x'}), duration: anime.random(400, 1200) },
137-
translateY: { value: anime.stagger('-38px', {grid: [24, 11], from: nextIndex, axis: 'y'}), duration: anime.random(400, 1200) },
138-
easing: 'easeOutSine'
139-
}, '-=1100')
140-
141-
index = nextIndex;
142-
143-
}
144-
145-
animateGrid();
77+
var advancedStaggeringAnimation = (function() {
78+
79+
var staggerVisualizerEl = document.querySelector('.stagger-visualizer');
80+
var dotsWrapperEl = staggerVisualizerEl.querySelector('.dots-wrapper');
81+
var dotsFragment = document.createDocumentFragment();
82+
var grid = [32, 16];
83+
var cellSize = 1;
84+
var numberOfElements = grid[0] * grid[1];
85+
var animation;
86+
var paused = true;
87+
88+
for (var i = 0; i < numberOfElements; i++) {
89+
var dotEl = document.createElement('div');
90+
dotEl.classList.add('dot');
91+
dotsFragment.appendChild(dotEl);
92+
}
93+
94+
dotsWrapperEl.appendChild(dotsFragment);
95+
96+
var index = anime.random(0, numberOfElements-1);
97+
var nextIndex = 0;
98+
99+
function play() {
100+
101+
paused = false;
102+
if (animation) animation.pause();
103+
104+
nextIndex = anime.random(0, numberOfElements-1);
105+
106+
var saturation = 75;
107+
108+
var colorStart = anime.random(0, 256);
109+
var colorEnd = anime.random(0, 256);
110+
var colorRangeValue = [colorStart, colorEnd];
111+
var luminosityStart = anime.random(60, 80);
112+
var luminosityEnd = anime.random(20, 40);
113+
var luminosityRangeValue = [luminosityStart, luminosityEnd];
114+
115+
function staggeredGridColors(el, i, total) {
116+
var hue = Math.round(anime.stagger(colorRangeValue, {grid: grid, from: index})(el, i, total));
117+
var luminosity = Math.round(anime.stagger(luminosityRangeValue, {grid: grid, from: index})(el, i, total));
118+
return 'hsl(' + hue + ', ' + saturation + '%, ' + luminosity + '%)';
119+
}
120+
121+
animation = anime({
122+
targets: '.stagger-visualizer .dot',
123+
keyframes: [
124+
{
125+
zIndex: function(el, i, total) {
126+
return Math.round(anime.stagger([numberOfElements, 0], {grid: grid, from: index})(el, i, total));
127+
},
128+
translateX: anime.stagger('-.001rem', {grid: grid, from: index, axis: 'x'}),
129+
translateY: anime.stagger('-.001rem', {grid: grid, from: index, axis: 'y'}),
130+
duration: 200
131+
}, {
132+
translateX: anime.stagger('.075rem', {grid: grid, from: index, axis: 'x'}),
133+
translateY: anime.stagger('.075rem', {grid: grid, from: index, axis: 'y'}),
134+
scale: anime.stagger([2, .2], {grid: grid, from: index}),
135+
backgroundColor: staggeredGridColors,
136+
duration: 450
137+
}, {
138+
translateX: 0,
139+
translateY: 0,
140+
scale: 1,
141+
duration: 500,
142+
}
143+
],
144+
delay: anime.stagger(60, {grid: grid, from: index}),
145+
easing: 'easeInOutQuad',
146+
complete: play
147+
}, 30)
148+
149+
index = nextIndex;
150+
151+
}
152+
153+
play();
154+
155+
})();
146156

147157
</script>
148158
</html>

‎documentation/examples/advanced-staggering.html

Lines changed: 8 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -13,9 +13,10 @@
1313
<meta name="twitter:site" content="@juliangarnier">
1414
<meta name="twitter:description" content="Javascript Animation Engine">
1515
<meta name="twitter:image" content="https://animejs.com/documentation/assets/img/icons/twitter.png">
16-
<link rel="apple-touch-icon-precomposed" href="../assets/img/icons/apple-touch-icon.png">
17-
<link rel="icon" type="image/png" href="../assets/img/icons/favicon.png" >
16+
<link rel="apple-touch-icon-precomposed" href="../assets/img/social-media-image.png">
17+
<link rel="icon" type="image/png" href="../assets/img/favicon.png" >
1818
<link href="../assets/css/animejs.css" rel="stylesheet">
19+
<link href="../assets/css/documentation.css" rel="stylesheet">
1920
<style>
2021

2122
:root {
@@ -76,6 +77,7 @@
7677
const staggerVisualizerEl = document.querySelector('.stagger-visualizer');
7778
const fragment = document.createDocumentFragment();
7879
const numberOfElements = 16*16;
80+
var animation;
7981

8082
for (let i = 0; i < numberOfElements; i++) {
8183
const dotEl = document.createElement('div');
@@ -90,13 +92,16 @@
9092

9193
function animateGrid() {
9294

95+
if (animation) animation.pause();
96+
9397
nextIndex = anime.random(0, numberOfElements);
9498

9599
anime.set('.cursor', {
96100
translateX: anime.stagger('-1rem', {grid: [16, 16], from: index, axis: 'x'}),
97101
translateY: anime.stagger('-1rem', {grid: [16, 16], from: index, axis: 'y'})
98102
});
99-
anime.timeline({
103+
104+
animation = anime.timeline({
100105
easing: 'easeInOutQuad',
101106
complete: animateGrid
102107
})

‎documentation/examples/anime-DOM-stress-test.html

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -13,8 +13,9 @@
1313
<meta name="twitter:site" content="@juliangarnier">
1414
<meta name="twitter:description" content="Javascript Animation Engine">
1515
<meta name="twitter:image" content="https://animejs.com/documentation/assets/img/icons/twitter.png">
16-
<link rel="apple-touch-icon-precomposed" href="../assets/img/icons/apple-touch-icon.png">
17-
<link rel="icon" type="image/png" href="../assets/img/icons/favicon.png" >
16+
<link rel="apple-touch-icon-precomposed" href="../assets/img/social-media-image.png">
17+
<link rel="icon" type="image/png" href="../assets/img/favicon.png" >
18+
<link href="../assets/css/animejs.css" rel="stylesheet">
1819
<link href="../assets/css/documentation.css" rel="stylesheet">
1920
<script src="../../lib/anime.min.js"></script>
2021
<!-- <script src="../assets/js/anime/anime.2.0.2.js"></script> -->
@@ -45,23 +46,22 @@
4546
function createEl(i) {
4647
var el = document.createElement('div');
4748
var hue = Math.round(360 / numberOfEls * i);
48-
var angle = i;
4949
el.classList.add('el');
5050
//el.style.border = '5px solid hsl(' + hue + ', 50%, 50%)';
5151
el.style.backgroundColor = 'hsl(' + hue + ', 50%, 50%)';
5252
wrapperEl.appendChild(el);
5353
anime({
5454
targets: el,
55-
translateX: Math.sin(angle) * distance + 'rem',
56-
translateY: Math.cos(angle) * distance + 'rem',
55+
translateX: Math.sin(i) * distance + 'rem',
56+
translateY: Math.cos(i) * distance + 'rem',
5757
scale: [
58-
{value: [0, 1]},
59-
{value: 0}
58+
{value: [.1, 2]},
59+
{value: .1}
6060
],
6161
easing: 'easeInOutSine',
6262
loop: true,
6363
duration: duration,
64-
startTime: i * (duration / numberOfEls)
64+
delay: i * (duration / numberOfEls)
6565
});
6666
};
6767

0 commit comments

Comments
 (0)