v1

Author: bardsley

winchester/attempt2.js

@@ -60,8 +60,8 @@ document.addEventListener("DOMContentLoaded", function(event) {
   })
 
   tlIntro.addLabel('start')
-    .add(gsap.to('#mission',{ x: 0, duration: 1}))
-    .add(gsap.to('#vision',{ x: 0, duration: 1}),"<+=1")
+    .add(gsap.to('#mission',{ x: 0, duration: 2}))
+    .add(gsap.to('#vision',{ x: 0, duration: 2}),"<+=1")
 
   // Goals Wheel
   const tlGoals = gsap.timeline({
@@ -73,23 +73,25 @@ document.addEventListener("DOMContentLoaded", function(event) {
       scrub: 0.5, // smooth scrubbing, takes 1 second to "catch up" to the scrollbar
       snap: {
           snapTo: 'labels', // snap to the closest label in the timeline
-          duration: { max: 0.3 }, // the snap animation should be at least 0.2 seconds, but no more than 3 seconds (determined by velocity)
+          // duration: { max: 0.3 }, // the snap animation should be at least 0.2 seconds, but no more than 3 seconds (determined by velocity)
           // delay: 0.1, // wait 0.2 seconds from the last scroll event before doing the snapping
           ease: 'power2.inOut' // the ease of the snap animation ("power3" by default)
       },
       // markers: true,
     }
   });
 
-  const labelOutState = {x: "-100%", scale: "0"}
+  const duration = 10
+  const labelOutState = {x: "-100%", scale: "0", duration: duration}
   const labelOutTiming = "" //'-=0.2'
-  const labelInState = {x: 0, scale: "1"}
+  const labelInState = {x: 0, scale: "1", duration: duration}
   const labelInTiming = "+=0.2"
+  
   tlGoals.addLabel("start")
     .add(gsap.to('#sports',{ y:50, duration: 1}),"start")
     // .add(gsap.to('#goals',{ paddingTop: "0px"}),"start")
     .addLabel("community")
-    .to("#community",{x: 0, scale: "1"})
+    .to("#community",{x: 0, scale: "1", duration: duration})
     .addLabel('support')
     .to('#goal-wheel', { rotation: 90 })
     .add(gsap.to("#community",labelOutState),`support${labelOutTiming}`)
@@ -111,16 +113,16 @@ document.addEventListener("DOMContentLoaded", function(event) {
   const tlPriority = gsap.timeline({
     scrollTrigger: {
       trigger: '#priorities',
-      start: '200px top',
+      start: 'top top',
       end: 'bottom top',
-      scrub: true,
+      scrub: 0.5,
       pin: true,
       markers: true,
       snap: {
         snapTo: 'labels', // snap to the closest label in the timeline
         duration: { max: 0.3 }, // the snap animation should be at least 0.2 seconds, but no more than 3 seconds (determined by velocity)
         // delay: 0.1, // wait 0.2 seconds from the last scroll event before doing the snapping
-        ease: 'power2.inOut' // the ease of the snap animation ("power3" by default)
+        ease: 'power1.inOut' // the ease of the snap animation ("power3" by default)
       },
     }
   })
@@ -159,8 +161,8 @@ document.addEventListener("DOMContentLoaded", function(event) {
 });
 
 function moveForward() {
-  timeline.seek(timeline.nextLabel())
+  timeline.tweenTo(timeline.nextLabel(),{ease: "power5.inOut"})
 }
 function moveBack() {
-  timeline.seek(timeline.previousLabel())
+  timeline.tweenTo(timeline.previousLabel(),{ease: "power5.inOut"})
 }

winchester/design1.html

@@ -17,7 +17,7 @@
       <div id="journey-line" data-depth='0.1'></div>
     </div>
 
-    <!-- <header id="hero">
+    <header id="hero">
       <h1>winchester students&apos; union strategy</h1>
       <div id="hero-image" class="imagery"></div>
     </header>
@@ -33,8 +33,8 @@ <h2>our vision</h2>
         <p>Winchester Students&apos; Union will empower our membership through the creation of innovative and inclusive student led, student delivered opportunities, activities and representation. </p>
       </div>
     </section>
-     -->
-<!-- 
+    
+
     <section id="goals">
 
       <div id="sports" class="picture"></div>
@@ -53,7 +53,7 @@ <h2>Our Goals</h2>
           </div>
         </div>        
       </div>
-    </section> -->
+    </section>
 
     <!-- <section class="spacer"></section> -->
 
@@ -112,7 +112,11 @@ <h3>collaboration</h3>
           <p>Improving collaboration and partnerships with the University to achieve the best experience for students.</p>
         </li>
       </ul>
-      <button onclick="moveForward()">Next</button>
+      <div id="controls">
+        <button onclick="moveBack()">Previous</button>
+        <button onclick="moveForward()">Next</button>
+      </div>
+      
     </section>
 
 

winchester/parallax.css

@@ -11,7 +11,7 @@
   --hero-height: 100vh;
   --line-thickness: 12px;
   --line-wiggle-room: 150px;
-  --max-column-width: 1024px;
+  --max-column-width: 1440px;
 }
 
 body {
@@ -200,6 +200,7 @@ section#introduction {
 @media screen and (min-width: 1024px) {
   #goals {
     padding-top: 100px;
+    height: 66vh;
   }
   #goals .picture {
     left: calc(50% - 512px);
@@ -260,7 +261,8 @@ section#introduction {
   margin: 0 auto;
 }
 .rotator #goal-wheel-wrap {
-  width: 75%;
+  height: 100%;
+  width: 80%;
   padding-top: 80px;
   background-image: url(./arrow.png);
   background-repeat: no-repeat;
@@ -269,6 +271,10 @@ section#introduction {
   background-size: 200px;
   position: relative;
 }
+.rotator #goal-wheel-wrap img {
+  max-height: 100%;
+}
+
 .rotator #goal-wheel-wrap .logo {
   width: 100%; height: calc(100% - 80px);
   position: absolute;
@@ -287,7 +293,8 @@ section#introduction {
     width: 100%;
   }
   .rotator #goal-wheel-wrap {
-    max-width: 50%;
+    /* max-width: 50%; */
+    width: 100%;
   }
   #goals .description .value {
     font-size: 3rem;
@@ -360,6 +367,22 @@ section#introduction {
   color: #fff;
 }
 
+#controls {
+  width: 100%;
+  padding: 2rem 0 ;
+  display: flex;
+  justify-content: center;
+  gap: 1rem;
+}
+#controls button  {
+  padding: 1rem;
+  font-size: 3rem;
+  color: #fff;
+  border: solid 1px transparent;
+  background-color: var(--organisation);
+  border-radius: 1rem;
+}
+
 #footer {
   height: 20rem;
   background-color: var(--organisation);