MAMPG/Home.js at master · durgavarapraveen/MAMPG · 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
gsap.registerPlugin(ScrollTrigger);


function Updateanimation() {
    gsap.to('.approval-name-1', {
        x: (window.innerWidth <= 400 ? null : (window.innerWidth < 600 ? '120%' : '170%')),
        y: (window.innerWidth <= 400 ? '-150px' : null),
        duration: 1,
        scrollTrigger: {
            trigger: ".approval-name-2",
            start: "top 85%",
            end: "bottom 20%",
            marker: true,
            toggleActions: "restart reverse restart reverse",
        }
    });

    gsap.to('.approval-name-3', {
        x: (window.innerWidth <= 400 ? null : (window.innerWidth < 600 ? '-120%' : '-170%')),
        y: (window.innerWidth <= 400 ? '150px' : null),
        duration: 1,
        scrollTrigger: {
            trigger: ".approval-name-2",
            start: "top 90%",
            end: "bottom 20%",
            toggleActions: "restart reverse restart reverse",

        }
    });
}

window.addEventListener('resize', Updateanimation)

gsap.ticker.add(Updateanimation)


const timeline = gsap.timeline({
    scrollTrigger: {
        trigger: ".flip-card-1",
        start: "top 90%",
        end: "bottom 10%",
        // markers: true,
        toggleActions: "restart reverse restart reverse"
    }
});

// Add the first animation to move the image horizontally
// timeline.to('.gsap-img-1', {
//     x: "125%",
//     duration: 0.4,
//     ease: 'power2.out'
// });


// Add the second animation to make the image disappear
// timeline.to('.gsap-img-1', {
//     scale: 0,
//     duration: 0.2,
//     ease: 'power2.out'
// });

timeline.to('.flip-card-1', {
    opacity: 1,
    duration: 0.2,
});

const timeline2 = gsap.timeline({
    scrollTrigger: {
        trigger: ".flip-card-2",
        start: "top 90%",
        end: "bottom 10%",
        // markers: true,
        toggleActions: "restart reverse restart reverse"
    }
});

// timeline2.to('.gsap-img-2', {
//     x: "-125%",
//     duration: 0.4,
//     ease: 'power2.out'
// });


// Add the second animation to make the image disappear
// timeline2.to('.gsap-img-2', {
//     scale: 0,
//     duration: 0.2,
//     ease: 'power2.out'
// });

timeline2.to(".flip-card-2", {
    opacity: 1,
    duration: 0.2,
});