Skip to content

Commit 9ae98cc

Browse files
bardsleybardsley
committed
Putting "live" demo
1 parent 8ce64db commit 9ae98cc

18 files changed

+6353
-0
lines changed

‎docs/client/winchester/arrow.png

4.74 KB
Loading

‎docs/client/winchester/attempt1.js

Lines changed: 179 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,179 @@
1+
// use a script tag or an external JS file
2+
document.addEventListener("DOMContentLoaded", function(event) {
3+
gsap.registerPlugin( ScrollTrigger);
4+
gsap.to("#journey-line", {
5+
// x: -20,
6+
y: -3500,
7+
// rotate: 3,
8+
duration: 1,
9+
scrollTrigger: {
10+
trigger: '#journey-line',
11+
start: 'top top',
12+
end: 'bottom bottom',
13+
scrub: true,
14+
// markers: true,
15+
}
16+
});
17+
gsap.to("#hero-image", {
18+
y: 100,
19+
// opacity: 0,
20+
duration: 1,
21+
scrollTrigger: {
22+
trigger: '#hero-image',
23+
start: 'top top',
24+
end: 'bottom 300',
25+
scrub: true,
26+
// markers: true
27+
}
28+
});
29+
30+
["#mission","#vision"].forEach((layerId,index) => {
31+
gsap.to(layerId, {
32+
x: 0,
33+
duration: 1,
34+
scrollTrigger: {
35+
trigger: '#hero-image',
36+
start: `${index*200} top`,
37+
end: 'bottom top',
38+
scrub: true,
39+
// markers: true
40+
}
41+
});
42+
})
43+
44+
ScrollTrigger.create({
45+
46+
trigger: '#goals',
47+
start: 'top top',
48+
endTrigger: '#measures',
49+
// end: 'bottom top',
50+
pin: '#goals',
51+
// markers: true
52+
53+
})
54+
55+
gsap.to("#sports", {
56+
y: 50,
57+
// opacity: 0,
58+
duration: 1,
59+
scrollTrigger: {
60+
trigger: '#goals',
61+
start: 'top-400px center',
62+
end: 'bottom bottom',
63+
scrub: true,
64+
// markers: true
65+
}
66+
});
67+
68+
gsap.to("#goal-wheel", {
69+
rotate: 270,
70+
duration: 1,
71+
scrollTrigger: {
72+
trigger: '#goals',
73+
start: 'top top',
74+
endTrigger: '#measures',
75+
scrub: true,
76+
// pinnedContainer: '#goals'
77+
markers: true
78+
}
79+
});
80+
81+
gsap.to("#community", {
82+
opacity: 1,
83+
duration: 1,
84+
repeat: 1,
85+
yoyo: true,
86+
scrollTrigger: {
87+
trigger: '#goals',
88+
start: '-500px top',
89+
endTrigger: '#measures',
90+
end: '-800px top',
91+
scrub: true,
92+
// markers: true
93+
}
94+
});
95+
96+
gsap.to("#support", {
97+
opacity: 1,
98+
duration: 1,
99+
repeat: 1,
100+
yoyo: true,
101+
scrollTrigger: {
102+
trigger: '#goals',
103+
start: 'top top',
104+
endTrigger: '#measures',
105+
end: '-300px top',
106+
scrub: true,
107+
// markers: true
108+
}
109+
});
110+
111+
gsap.to("#advocacy", {
112+
opacity: 1,
113+
duration: 1,
114+
repeat: 1,
115+
yoyo: true,
116+
scrollTrigger: {
117+
trigger: '#measures',
118+
start: '-2800px top',
119+
endTrigger: '#measures',
120+
end: '-2400px top',
121+
scrub: true,
122+
// markers: true
123+
}
124+
});
125+
126+
// gsap.to("#support", {
127+
// opacity: 1,
128+
// duration: 1,
129+
// repeat: 1,
130+
// yoyo: true,
131+
// scrollTrigger: {
132+
// trigger: '#goals',
133+
// start: 'top 200px',
134+
// end: '500px top',
135+
// scrub: true,
136+
// markers: true
137+
// }
138+
// });
139+
140+
// const segments = ["#community","#support","#advocacy","#familiarity"]
141+
// // const segments = ["#community","#support"]
142+
// segments.forEach((layerId,index) => {
143+
// gsap.to(layerId, {
144+
// opacity: 1,
145+
// duration: 1,
146+
// repeat: 1,
147+
// yoyo: true,
148+
// scrollTrigger: {
149+
// trigger: '#goals',
150+
// start: `-${(segments.length - index)*350-1000}px top`,
151+
// end: `${(index*50)+2650}px top`,
152+
// scrub: true,
153+
// markers: { content: `tezt${index}`}
154+
// }
155+
// });
156+
// })
157+
158+
ScrollTrigger.create({
159+
160+
trigger: '#measures',
161+
start: 'top top',
162+
endTrigger: '#priorities',
163+
end: 'bottom top',
164+
pin: '#measures',
165+
// markers: true
166+
167+
})
168+
ScrollTrigger.create({
169+
170+
trigger: '#priorities',
171+
start: 'top top',
172+
endTrigger: '#footer',
173+
end: 'bottom top',
174+
pin: '#priorities',
175+
// markers: true
176+
177+
})
178+
179+
});

‎docs/client/winchester/attempt2.js

Lines changed: 168 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,168 @@
1+
document.addEventListener("DOMContentLoaded", function(event) {
2+
gsap.registerPlugin( ScrollTrigger);
3+
4+
// Progress bar at top
5+
const tlProgress = gsap.timeline({
6+
scrollTrigger: {
7+
trigger: '#journey-line',
8+
start: 'top top',
9+
endTrigger: '#footer',
10+
end: '+=2000 bottom',
11+
scrub: true,
12+
ease: 'none'
13+
// markers: true,
14+
}
15+
});
16+
tlProgress.to("#progress", { width: "100%" })
17+
18+
// Journey line
19+
const tlDoc = gsap.timeline({
20+
scrollTrigger: {
21+
trigger: '#journey-line',
22+
start: 'top top',
23+
endTrigger: '#footer',
24+
end: '+=2000 bottom',
25+
scrub: true,
26+
ease: 'none',
27+
// markers: true,
28+
}
29+
});
30+
tlDoc.to("#journey-line", {
31+
// x: -100,
32+
y: "10%",
33+
duration: 10,
34+
});
35+
36+
// Header
37+
const tlHero = gsap.timeline({
38+
scrollTrigger: {
39+
trigger: '#hero',
40+
start: '+=50 top',
41+
end: 'bottom top',
42+
scrub: true,
43+
ease: 'power5.inOut',
44+
// markers: true,
45+
}
46+
})
47+
tlHero.to("#hero-image", {
48+
y: 100,
49+
});
50+
51+
// Introduction
52+
const tlIntro = gsap.timeline({
53+
scrollTrigger: {
54+
trigger: '#introduction',
55+
start: 'top 66%',
56+
end: 'bottom bottom',
57+
scrub: true,
58+
markers: true,
59+
}
60+
})
61+
62+
tlIntro.addLabel('start')
63+
.add(gsap.to('#mission',{ x: 0, duration: 2}))
64+
.add(gsap.to('#vision',{ x: 0, duration: 2}),"<+=1")
65+
66+
// Goals Wheel
67+
const tlGoals = gsap.timeline({
68+
scrollTrigger: {
69+
trigger: '#goals',
70+
pin: true,
71+
start: 'top top+=50', // when the top of the trigger hits the top of the viewport
72+
end: '+=1500px', // end after scrolling 500px beyond the start
73+
scrub: 0.5, // smooth scrubbing, takes 1 second to "catch up" to the scrollbar
74+
snap: {
75+
snapTo: 'labels', // snap to the closest label in the timeline
76+
// duration: { max: 0.3 }, // the snap animation should be at least 0.2 seconds, but no more than 3 seconds (determined by velocity)
77+
// delay: 0.1, // wait 0.2 seconds from the last scroll event before doing the snapping
78+
ease: 'power2.inOut' // the ease of the snap animation ("power3" by default)
79+
},
80+
// markers: true,
81+
}
82+
});
83+
84+
const duration = 10
85+
const labelOutState = {x: "-100%", scale: "0", duration: duration}
86+
const labelOutTiming = "" //'-=0.2'
87+
const labelInState = {x: 0, scale: "1", duration: duration}
88+
const labelInTiming = "+=0.2"
89+
90+
tlGoals.addLabel("start")
91+
.add(gsap.to('#sports',{ y:50, duration: 1}),"start")
92+
// .add(gsap.to('#goals',{ paddingTop: "0px"}),"start")
93+
.addLabel("community")
94+
.to("#community",{x: 0, scale: "1", duration: duration})
95+
.addLabel('support')
96+
.to('#goal-wheel', { rotation: 90 })
97+
.add(gsap.to("#community",labelOutState),`support${labelOutTiming}`)
98+
.add(gsap.to("#support",labelInState),`support${labelInTiming}`)
99+
.addLabel('advocacy')
100+
.to('#goal-wheel', { rotation: 180 })
101+
.add(gsap.to("#support",labelOutState),`advocacy${labelOutTiming}`)
102+
.add(gsap.to("#advocacy",labelInState),`advocacy${labelInTiming}`)
103+
.addLabel('familiarity')
104+
.to('#goal-wheel', { rotation: 270 })
105+
.add(gsap.to("#advocacy",labelOutState),`familiarity${labelOutTiming}`)
106+
.add(gsap.to("#familiarity",labelInState),`familiarity${labelInTiming}`)
107+
.addLabel('end')
108+
.to('#goal-wheel', { rotation: 360 })
109+
.add(gsap.to("#familiarity",labelOutState),`end${labelOutTiming}`)
110+
111+
112+
// Priroities slider
113+
const tlPriority = gsap.timeline({
114+
scrollTrigger: {
115+
trigger: '#priorities',
116+
start: 'top top',
117+
end: 'bottom top',
118+
scrub: 0.5,
119+
pin: true,
120+
markers: true,
121+
snap: {
122+
snapTo: 'labels', // snap to the closest label in the timeline
123+
duration: { max: 0.3 }, // the snap animation should be at least 0.2 seconds, but no more than 3 seconds (determined by velocity)
124+
// delay: 0.1, // wait 0.2 seconds from the last scroll event before doing the snapping
125+
ease: 'power1.inOut' // the ease of the snap animation ("power3" by default)
126+
},
127+
}
128+
})
129+
130+
const sliderElement = document.getElementById('priority-slider') //.getBoundingClientRect()
131+
const sliderContainer = document.getElementById('priorities') //.getBoundingClientRect()
132+
const singlePanel = 750
133+
const panels = Array.from(sliderElement.getElementsByTagName('li'))
134+
const panelNames = panels.map((panel) => { return panel.id })
135+
const numberOfPanels = panels.length
136+
const totalMovement = (sliderElement.scrollWidth - sliderContainer.offsetWidth) * -1
137+
window.sliderElement = sliderElement
138+
window.sliderContainer = sliderContainer
139+
window.panels = panels
140+
window.timeline = tlPriority
141+
142+
143+
const gapSize = 100
144+
const panelSize = panels[0].offsetWidth
145+
const startingPosition = (sliderContainer.offsetWidth/2) - (panelSize/2)
146+
const movementAmount = panelSize + gapSize
147+
console.log("Sizes",gapSize,panelSize, movementAmount)
148+
149+
let lastLabel = tlPriority
150+
151+
panelNames.forEach((panelName,index) => {
152+
lastLabel = lastLabel.addLabel(panelName)
153+
const offset = index*movementAmount
154+
console.log("panelName",panelName,startingPosition,offset)
155+
lastLabel.to('#priority-slider',{x: startingPosition - offset , ease: "none"},panelName)
156+
})
157+
158+
159+
console.log(tlPriority)
160+
// .to('#priority-slider',{x: totalMovement , ease: "none"},)
161+
});
162+
163+
function moveForward() {
164+
timeline.tweenTo(timeline.nextLabel(),{ease: "power5.inOut"})
165+
}
166+
function moveBack() {
167+
timeline.tweenTo(timeline.previousLabel(),{ease: "power5.inOut"})
168+
}

‎docs/client/winchester/background.png

2.64 MB
Loading

‎docs/client/winchester/background2.png

182 KB
Loading

0 commit comments

Comments
 (0)