-
Notifications
You must be signed in to change notification settings - Fork 0
/
script.js
57 lines (52 loc) · 1.58 KB
/
script.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
Shery.imageEffect('#back', {
style: 5,
config: {
a: { value: 1.24, range: [0, 30] },
b: { value: -0.98, range: [-1, 1] },
aspect: { value: 1.9689840224974933 },
gooey: { value: true },
infiniteGooey: { value: true },
durationOut: { value: 1, range: [0.1, 5] },
durationIn: { value: 1.5, range: [0.1, 5] },
displaceAmount: { value: 0.5 },
masker: { value: true },
maskVal: { value: 1, range: [1, 5] },
scrollType: { value: 0 },
geoVertex: { range: [1, 64], value: 1 },
noEffectGooey: { value: true },
onMouse: { value: 1 },
noise_speed: { value: 0.2, range: [0, 10] },
metaball: { value: 0.2, range: [0, 2] },
discard_threshold: { value: 0.5, range: [0, 1] },
antialias_threshold: { value: 0, range: [0, 0.1] },
noise_height: { value: 0.5, range: [0, 2] },
noise_scale: { value: 10, range: [0, 100] },
},
gooey: true,
});
var elems = document.querySelectorAll('.elem');
elems.forEach(function (elem) {
var h1s = elem.querySelectorAll('h1');
var index = 0;
var animating = false;
document.querySelector('#main').addEventListener('click', function () {
if (!animating) {
animating = true;
gsap.to(h1s[index], {
top: '-=100%',
ease: Expo.easeInOut,
duratio: 1,
onComplete: function () {
gsap.set(this._targets[0], { top: '100%' });
animating = false;
},
});
index === h1s.length - 1 ? (index = 0) : index++;
gsap.to(h1s[index], {
top: '-=100%',
ease: Expo.easeInOut,
duratio: 1,
});
}
});
});