-
Notifications
You must be signed in to change notification settings - Fork 0
/
app.js
100 lines (98 loc) · 5.84 KB
/
app.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
95
96
97
98
99
100
gsap.registerPlugin(ScrollTrigger);
var winter_tl = gsap.timeline( { defaults: { duration: 16 },
scrollTrigger: {
trigger: '.winter-animation',
scrub: 1,
pin: true,
start: 'top top',
end: '+=3960px'
}
})
.to('.winter-songs', {
motionPath: {
path: [ {x: -3960 + document.documentElement.clientWidth + 150, y: 0} ]
},
duration: 13,
ease: 'power3.inOut'
})
.to('.winter-sun', {
motionPath: {
path: [ {x: document.documentElement.clientWidth / 2, y: -0.2 * document.documentElement.clientWidth}, {x: document.documentElement.clientWidth, y: 0} ]
},
duration: 10,
ease: 'power1.inOut'
}, '-=13')
.to('.winter-moon', {
motionPath: {
path: [ {x: document.documentElement.clientWidth / 2, y: -0.2 * document.documentElement.clientWidth}, {x: document.documentElement.clientWidth, y: 0} ]
},
duration: 10,
ease: 'power1.inOut'
}, '-=9')
.to('.winter-background', { background: "linear-gradient(90deg, hsla(333, 34%, 45%, 1) 0%, hsla(0, 0%, 22%, 1) 50%, hsla(0, 0%, 17%, 1) 100%)", duration: 1.25 }, '-0.25')
.to('.winter-1', { opacity: 0, duration: 1.25 }, '2.25')
.to('.winter-background', { background: "linear-gradient(90deg, hsla(345, 37%, 45%, 1) 0%, hsla(0, 0%, 26%, 1) 50%, hsla(0, 0%, 22%, 1) 100%)", duration: 1.25 }, '2.25')
.to('.winter-2', { opacity: 0, duration: 1.25 }, '3')
.to('.winter-background', { background: "linear-gradient(90deg, hsla(353, 26%, 58%, 1) 0%, hsla(0, 0%, 40%, 1) 50%, hsla(0, 0%, 35%, 1) 100%)", duration: 1.25 }, '3')
.to('.winter-3', { opacity: 0, duration: 1.25 }, '3.75')
.to('.winter-background', { background: "linear-gradient(90deg, hsla(353, 6%, 72%, 1) 0%, hsla(0, 0%, 50%, 1) 50%, hsla(0, 0%, 50%, 1) 100%)", duration: 1.25 }, '3.75')
.to('.winter-4', { opacity: 0, duration: 2 }, '4.5')
.to('.winter-5', { opacity: 1, duration: 0.5 }, '4.5')
.to('.winter-background', { background: "linear-gradient(90deg, hsla(0, 0%, 56%, 1) 0%, hsla(0, 0%, 67%, 1) 50%, hsla(0, 0%, 56%, 1) 100%)", duration: 2 }, '4.5')
.to('.winter-5', { opacity: 0, duration: 1.25 }, '5.25')
.to('.winter-6', { opacity: 1, duration: 0.5 }, '5.25')
.to('.winter-background', { background: "linear-gradient(90deg, hsla(0, 0%, 26%, 1) 0%, hsla(0, 0%, 33%, 1) 50%, hsla(0, 48%, 38%, 1) 100%)", duration: 1.25 }, '5.25')
.to('.winter-animation', { background: "#000000", duration: 1 }, '6')
.to('.w4', { color: '#fff', duration: 0.5 }, '6')
.to('.winter-6', { opacity: 0, duration: 1.25 }, '6')
.to('.winter-7', { opacity: 1, duration: 0.5 }, '6')
.to('.winter-background', { background: "linear-gradient(90deg, hsla(0, 0%, 21%, 1) 0%, hsla(0, 0%, 25%, 1) 50%, hsla(0, 58%, 15%, 1) 100%)", duration: 1.25 }, '6')
.to('.winter-background', { background: "linear-gradient(90deg, hsla(0, 0%, 16%, 1) 0%, hsla(0, 0%, 16%, 1) 50%, hsla(0, 74%, 9%, 1) 100%)", duration: 1.25 }, '7.25')
.to('.winter-background', { background: "linear-gradient(0deg, hsla(0, 0%, 0%, 1) 0%, hsla(0, 0%, 0%, 1) 50%, hsla(0, 0%, 0%, 1) 100%)", duration: 5.5 }, '8.5')
var spring_tl = gsap.timeline( { defaults: { duration: 16 },
scrollTrigger: {
trigger: '.spring-animation',
scrub: 1,
pin: true,
start: 'top top',
end: '+=3810px'
}
})
.to('.spring-songs', {
motionPath: {
path: [ {x: -3810 + document.documentElement.clientWidth, y: 0} ]
},
duration: 13,
ease: 'power3.inOut'
})
.to('.spring-sun', {
motionPath: {
path: [ {x: document.documentElement.clientWidth / 2, y: -0.2 * document.documentElement.clientWidth}, {x: document.documentElement.clientWidth, y: 0} ]
},
duration: 10,
ease: 'power1.inOut'
}, '-=13')
.to('.spring-moon', {
motionPath: {
path: [ {x: document.documentElement.clientWidth / 2, y: -0.2 * document.documentElement.clientWidth}, {x: document.documentElement.clientWidth, y: 0} ]
},
duration: 10,
ease: 'power1.inOut'
}, '-=9')
.to('.spring-background', { background: "linear-gradient(90deg, hsla(320, 45%, 16%, 1) 0%, hsla(318, 17%, 12%, 1) 50%, hsla(0, 0%, 0%, 1) 100%)", duration: 1.25 }, '-0.25')
.to('.spring-1', { opacity: 0, duration: 1.25 }, '2.25')
.to('.spring-background', { background: "linear-gradient(90deg, hsla(320, 63%, 32%, 1) 0%, hsla(319, 33%, 28%, 1) 50%, hsla(318, 17%, 12%, 1) 100%)", duration: 1.25 }, '2.25')
.to('.spring-2', { opacity: 0, duration: 1.25 }, '3')
.to('.spring-background', { background: "linear-gradient(90deg, hsla(257, 63%, 32%, 1) 0%, hsla(238, 43%, 43%, 1) 50%, hsla(238, 43%, 43%, 1) 100%)", duration: 1.25 }, '3')
.to('.spring-3', { opacity: 0, duration: 1.25 }, '3.75')
.to('.spring-background', { background: "linear-gradient(90deg, hsla(222, 60%, 53%, 1) 0%, hsla(214, 70%, 66%, 1) 50%, hsla(222, 60%, 53%, 1) 100%)", duration: 1.25 }, '3.75')
.to('.spring-4', { opacity: 0, duration: 2 }, '4.5')
.to('.spring-background', { background: "linear-gradient(90deg, hsla(222, 60%, 53%, 1) 0%, hsla(214, 70%, 66%, 1) 50%, hsla(264, 79%, 63%, 1) 100%)", duration: 2 }, '4.5')
.to('.spring-5', { opacity: 0, duration: 1.25 }, '5.25')
.to('.spring-background', { background: "linear-gradient(90deg, hsla(222, 40%, 50%, 1) 0%, hsla(214, 39%, 53%, 1) 50%, hsla(264, 36%, 43%, 1) 100%)", duration: 1.25 }, '5.25')
.to('.spring-6', { opacity: 0, duration: 1.25 }, '6')
.to('.spring-animation', { background: "#000000", duration: 1 }, '6')
.to('.s5', { color: '#fff', duration: 0.5 }, '6')
.to('.spring-background', { background: "linear-gradient(90deg, hsla(222, 34%, 25%, 1) 0%, hsla(213, 30%, 28%, 1) 50%, hsla(264, 30%, 23%, 1) 100%)", duration: 1.25 }, '6')
.to('.spring-background', { background: "linear-gradient(90deg, hsla(222, 20%, 13%, 1) 0%, hsla(212, 23%, 14%, 1) 50%, hsla(265, 38%, 6%, 1) 100%)", duration: 1.25 }, '7.25')
.to('.spring-background', { background: "linear-gradient(0deg, hsla(0, 0%, 0%, 1) 0%, hsla(0, 0%, 0%, 1) 50%, hsla(0, 0%, 0%, 1) 100%)", duration: 5.5 }, '8.5')