two-good-clone/script.js at main · codewmaroof/two-good-clone · 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
//  locomotive js
// const scroll = new LocomotiveScroll({
//     el: document.querySelector('main'),
//     smooth: true
// });

function locomotiveAnimation(){
   gsap.registerPlugin(ScrollTrigger);

// Using Locomotive Scroll from Locomotive https://github.com/locomotivemtl/locomotive-scroll

const locoScroll = new LocomotiveScroll({
  el: document.querySelector("main"),
  smooth: true
});
// each time Locomotive Scroll updates, tell ScrollTrigger to update too (sync positioning)
locoScroll.on("scroll", ScrollTrigger.update);

// tell ScrollTrigger to use these proxy methods for the "main" element since Locomotive Scroll is hijacking things
ScrollTrigger.scrollerProxy("main", {
  scrollTop(value) {
    return arguments.length ? locoScroll.scrollTo(value, 0, 0) : locoScroll.scroll.instance.scroll.y;
  }, // we don't have to define a scrollLeft because we're only scrolling vertically.
  getBoundingClientRect() {
    return {top: 0, left: 0, width: window.innerWidth, height: window.innerHeight};
  },
  // LocomotiveScroll handles things completely differently on mobile devices - it doesn't even transform the container at all! So to get the correct behavior and avoid jitters, we should pin things with position: fixed on mobile. We sense it by checking to see if there's a transform applied to the container (the LocomotiveScroll-controlled element).
  pinType: document.querySelector("main").style.transform ? "transform" : "fixed"
});


// each time the window updates, we should refresh ScrollTrigger and then update LocomotiveScroll.
ScrollTrigger.addEventListener("refresh", () => locoScroll.update());

// after everything is set up, refresh() ScrollTrigger and update LocomotiveScroll because padding may have been added for pinning, etc.
ScrollTrigger.refresh();

}
locomotiveAnimation()
function loadinganimation(){
     gsap.from(".page1 > h1",{
    y:100,
    opacity:0,
    delay:0.5,
    duration:0.8,
    stagger:0.3
 })

 gsap.from("img",{
    y:30,
    opacity:0,
    delay:1.2,


 })


}
loadinganimation()
 var menu = document.querySelector(".ri-menu-line")
var blackoutpage = document.querySelector(".black-out")
var nav = document.querySelector("nav")
var a = document.querySelector("a")
var icon = document.querySelector("nav .right i")


var found =0
function menuanimation(){

menu.addEventListener("click", function() {

    if (found==0)
      {
        blackoutpage.style.display = "flex";
         nav.style.color = "white"
         icon.style.color = "black"
         a.style.color= "white"

        gsap.to('.black-out',{
        y:712,
        delay:0,
        duration:1
      })
      found=1;

    }
    else
      {
          nav.style.color = "black"
      gsap.to('.black-out',{
        y:-110,
        delay:0,
        duration:0.4
        })

        found = 0

    }
});

}
menuanimation()