-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathscript.js
37 lines (33 loc) · 2.03 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
Shery.imageEffect("#back", {
style: 5,
config: {"a":{"value":0.92,"range":[0,30]},"b":{"value":0.79,"range":[-1,1]},"zindex":{"value":-9996999,"range":[-9999999,9999999]},"aspect":{"value":1.957732053147149},"ignoreShapeAspect":{"value":true},"shapePosition":{"value":{"x":0,"y":0}},"shapeScale":{"value":{"x":0.5,"y":0.5}},"shapeEdgeSoftness":{"value":0,"range":[0,0.5]},"shapeRadius":{"value":0,"range":[0,2]},"currentScroll":{"value":0},"scrollLerp":{"value":0.07},"gooey":{"value":true},"infiniteGooey":{"value":true},"growSize":{"value":3.03,"range":[1,15]},"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.06,"range":[1,5]},"scrollType":{"value":0},"geoVertex":{"range":[1,64],"value":1},"noEffectGooey":{"value":false},"onMouse":{"value":1},"noise_speed":{"value":1.3,"range":[0,10]},"metaball":{"value":0.2,"range":[0,2],"_gsap":{"id":15}},"discard_threshold":{"value":0.56,"range":[0,1]},"antialias_threshold":{"value":0,"range":[0,0.1]},"noise_height":{"value":0.4,"range":[0,2]},"noise_scale":{"value":12.98,"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,
duration:1,
onComplete:function(){
// console.log(this)
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,
duration:1
});
}
});
})