-
Notifications
You must be signed in to change notification settings - Fork 0
/
gsap.js
66 lines (49 loc) · 1.53 KB
/
gsap.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
const dots = gsap.utils.toArray(".dot");
const details = gsap.utils.toArray(".details");
const photos = gsap.utils.toArray(".photo:not(:first-child)")
gsap.set(photos, {yPercent:101})
const allPhotos = gsap.utils.toArray(".photo")
gsap.set('.photo:not(:first-child)', { yPercent: 100 });
const animation = gsap.to('.photo:not(:first-child)', {
yPercent: 0,
duration: 0.7,
stagger: 1
});
// create
let mm = gsap.matchMedia();
// add a media query. When it matches, the associated function will run
mm.add("(min-width: 1100px)", () => {
// this setup code only runs when viewport is at least 600px wide
ScrollTrigger.create({
trigger: '.project-wrapper',
start: "top top",
end: "bottom bottom",
pin: '.project-right',
animation: animation,
scrub: true,
markers: false,
});
details.forEach((detail, i) => {
let index; // Variable to store the index
let headline = detail.querySelector(".project-title")
let animation = gsap.timeline()
.to(photos[index], {yPercent:0})
.set(allPhotos[index], {autoAlpha:0})
ScrollTrigger.create({
trigger: detail,
start: "top 50%",
end: "bottom 50%",
animation:animation,
scrub:true,
markers:false,
onToggle: (self) => {
if (self.isActive) {
dots[i].classList.add('active')
}else{
dots[i].classList.remove('active')
}
},
stagger: 0.7,
});
});
})