custom-javascript.js
3.08 KB
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
import LocomotiveScroll from 'locomotive-scroll';
import gsap from "gsap";
import ScrollTrigger from "gsap/ScrollTrigger";
import ScrollToPlugin from "gsap/ScrollToPlugin";
//const scroll = new LocomotiveScroll();
document.addEventListener("DOMContentLoaded", function() {
window.addEventListener('scroll', function() {
if (window.scrollY > 57) {
document.getElementById('main-nav').classList.add('fixed-top');
} else {
document.getElementById('main-nav').classList.remove('fixed-top');
}
});
});
gsap.registerPlugin(ScrollTrigger);
// Using Locomotive Scroll from Locomotive https://github.com/locomotivemtl/locomotive-scroll
// const locoScroll = new LocomotiveScroll({
// el: document.querySelector("#js-scroll"),
// 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 "#js-scroll" element since Locomotive Scroll is hijacking things
// ScrollTrigger.scrollerProxy("#js-scroll", {
// 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("#js-scroll").style.transform ? "transform" : "fixed"
// });
// var tl = gsap.timeline({
// scrollTrigger: {
// trigger: "#vc1",
// scroller: "body",
// markers:true,
// scrub: true,
// pin: true,
// start: "top top",
// end: "+=100%",
// }
// });
var tl = gsap.timeline({
scrollTrigger: {
trigger: "#vc1",
scroller: "body",
markers:true,
scrub: true,
pin: true,
start: "top top",
end: "+=150%",
}
});
var tl1 = gsap.timeline({
scrollTrigger: {
trigger: "#vc2",
scroller: "body",
markers:true,
scrub: true,
pin: true,
start: "top top",
end: "+=150%",
}
});
// ScrollTrigger.create({
// trigger: "#vc1",
// scroller: "#js-scroll",
// markers:true,
// scrub: true,
// pin: true,
// start: "top top",
// end: "+=100%"
// });
tl.to(".move_1", {y: -786}, 0).to(".move_2", {y: -486},0)
tl1.to(".move_3", {y: -786}, 0).to(".move_4", {y: -786},0)
// 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();