-
Notifications
You must be signed in to change notification settings - Fork 0
/
script.js
92 lines (73 loc) · 3.05 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
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
function myAnimation(){
gsap.from("#home-main h4", {
y:200,
opacity:0,
delay:0.5,
duration:0.7,
ease: "shine.in"
})
const headings = document.querySelectorAll("#heading h1");
// Iterate over each h1 element and apply GSAP animation
headings.forEach((heading, index) => {
gsap.from(heading, {
opacity: 0,
delay: 1.5 + index * 0.4, // Adjust delay for each heading
duration: 0.7,
stagger: 1.1
});
});
gsap.from("#nav", {
opacity:0,
delay:2.5,
duration:1.7
})
gsap.from("#home-last", {
opacity:0,
delay:2.5,
duration:1.7,
ease: "expo.in"
})
}
myAnimation();
// const scroll = new LocomotiveScroll({
// el: document.querySelector('#main'),
// smooth: true
// });
Shery.mouseFollower();
Shery.hoverWithMediaCircle(".hva", {
videos: ["https://media.istockphoto.com/id/1399092574/video/adventurous-woman-on-a-rocky-mountain-overlooking-ocean-coast.mp4?s=mp4-640x640-is&k=20&c=xqpqkkQgwjJvb3IXekuXSOYa-ajiNW_eFZFIT1vkFHY="]
});
gsap.to(".flefth", {
scrollTrigger: {
trigger: "#fcont",
pin: true,
start: "top top",
end: "bottom bottom",
endTrigger: ".last",
scrub: 1,
},
y: "-300%",
ease: Power1,
});
let sections = document.querySelectorAll(".flefth");
Shery.imageEffect(".fimg", {
style: 2,
config: {"uColor":{"value":false},"uSpeed":{"value":0.6,"range":[0.1,1],"rangep":[1,10]},"uAmplitude":{"value":1.5,"range":[0,5]},"uFrequency":{"value":3.5,"range":[0,10]},"geoVertex":{"range":[1,64],"value":32},"zindex":{"value":"1","range":[-9999999,9999999]},"aspect":{"value":0.851063829787234},"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":1.75},"scrollLerp":{"value":0.07},"gooey":{"value":false},"infiniteGooey":{"value":false},"growSize":{"value":4,"range":[1,15]},"durationOut":{"value":1,"range":[0.1,5]},"durationIn":{"value":1.5,"range":[0.1,5]},"displaceAmount":{"value":0.5},"masker":{"value":false},"maskVal":{"value":1,"range":[1,5]},"scrollType":{"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.002,"range":[0,0.1]},"noise_height":{"value":0.5,"range":[0,2]},"noise_scale":{"value":10,"range":[0,100]}},
slideStyle: (setScroll) => {
sections.forEach(function (section, index) {
ScrollTrigger.create({
trigger: section,
start: "top top",
scrub: 4,
onUpdate: function (prog) {
setScroll(prog.progress + index);
},
});
});
},
});
Shery.makeMagnet(".magnet" /* Element to target.*/, {
//Parameters are optional.
ease: "cubic-bezier(0.23, 1, 0.320, 1)",
duration: 1,
});