fanta/script.js at main · manish-850/fanta · GitHub

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
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
gsap.registerPlugin(ScrollTrigger);

document.addEventListener("DOMContentLoaded", (event) => {
  var tl = gsap.timeline({
    scrollTrigger:{
        trigger:"#page2",
        start:"0% 95%",
        end:"50% 50%",
        scrub:1,
    }
});

tl.to("#fanta",{
    top:"120%",
    left:"20%",
    ease:"power1.out",
},"anim");

tl.to("#half-orange",{
    top:"160%",
    left:"22%",
    ease: "power1.out",
},"anim+=0.1");

tl.to("#oranges",{
    width:"22%",
    bottom:"-100%",
    right:"5%",
    ease: "power1.out",
},"anim");

tl.to("#leaf",{
    rotate:"310deg",
    top:"110%",
    left:"80%",
    ease: "power1.out",
},"anim");

tl.to("#leaf2",{
    rotate:"-270deg",
    bottom:"-30%",
    right:"85%",
    ease: "power1.out",
},"anim+=0.1");

var tl2 = gsap.timeline({
    scrollTrigger:{
        trigger:"#page3",
        start:"0% 95%",
        end:"20% 50%",
        scrub:1,
    }
});

tl2.to("#fanta",{
    width:"31%",
    top:"215%",
    left:"50%",
    ease: "power1.out",
},"anim2");

tl2.to("#half-orange",{
    top:"204%",
    left:"42%",
    ease: "power1.out",
},"anim2+=0.1");

tl2.from("#main #page3 .card .main-img1",{
    rotate:-90,
    top: "0%",
    left: "-100%",
    ease: "power1.out",
},"anim2");

tl2.from("#main #page3 .card .bg-img1",{
    rotate:-90,
    top: "-20%",
    left: "-100%",
    ease: "power1.out",
},"anim2+=0.1");

tl2.from("#main #page3 .card .main-img3",{
    rotate:90,
    top: "-2%",
    left: "100%",
    ease: "power1.out",
},"anim2");

tl2.from("#main #page3 .card .bg-img3",{
    rotate:90,
    top: "-28%",
    left: "100%",
    ease: "power1.out",
},"anim2+=0.1");

// Initialize a new Lenis instance for smooth scrolling
const lenis = new Lenis();

// Synchronize Lenis scrolling with GSAP's ScrollTrigger plugin
lenis.on('scroll', ScrollTrigger.update);

// Add Lenis's requestAnimationFrame (raf) method to GSAP's ticker
// This ensures Lenis's smooth scroll animation updates on each GSAP tick
gsap.ticker.add((time) => {
    lenis.raf(time * 1000); // Convert time from seconds to milliseconds
});

// Disable lag smoothing in GSAP to prevent any delay in scroll animations
gsap.ticker.lagSmoothing(0);

});