-
Notifications
You must be signed in to change notification settings - Fork 0
/
script.js
101 lines (81 loc) · 2.03 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
93
94
// Add active class to current nav selected link
var a = document.querySelectorAll(".navbar li a");
for (var i = 0, length = a.length; i < length; i++) {
a[i].onclick = function() {
var b = document.querySelector(".navbar li.active");
if (b) b.classList.remove("active");
this.parentNode.classList.add('active');
};
}
// Color palette variables
let dark = '#252525';
let mid = '#888';
let light = 'rgba(255, 255, 255, 0.4)';
// Add scrollmagic controller
let controller = new ScrollMagic.Controller();
//------------------
//TIMELINE 2
//------------------
let tl4 = anime.timeline({autoplay: false});
// Add animations
let s3a2 = {
targets: '#two .card-container',
opacity: [0,1],
translateX: {
value: ['-100%', '0%'],
duration: 3500,
},
duration: 3000,
delay: 0,
easing: 'easeInOutSine'
};
// Add children
tl4.add(s3a2);
//------------------
//SCENE 3
//------------------
//Add third scrollmagic scene
let scene3 = new ScrollMagic.Scene({
triggerElement: "#site-banner",
duration: 2000,
triggerHook: 0
})
// Trigger animation timeline
//Use scroll position to play animation
.on("progress", function (event) {
tl4.seek((tl4.duration * event.progress) * 3);
})
.setPin('#three')
.addTo(controller);
let scroll_tl = gsap.timeline({
scrollTrigger: {
trigger: '.factsContainer',
start: "top center",
// pin: true,
scrub: true,
end: "+=300",
// markers: true,
}
}),
facts = [...document.querySelectorAll('.fact')]
scroll_tl.to('.factsContainer h2', {
scale: 1.5,
duration: 1,
ease: "slow"
})
scroll_tl.to(facts, {
xPercent: -85 * (facts.length - 1),
scrollTrigger: {
trigger: ".factsContainer_sm",
start: "center center",
pin: true,
// horizontal: true,
// pinSpacing:false,
// markers: true,
scrub: 1,
snap: 1 / (facts.length - 1),
// base vertical scrolling on how wide the container is so it feels more natural.
// end: () => `+=${smallFactsContainer.offsetWidth}`
end: () => `+=4320`
}
});