Skip to content

Commit

Permalink
Added measures and smoothed it all out v0.8
Browse files Browse the repository at this point in the history
  • Loading branch information
@bardsley
bardsley committed Nov 24, 2024
1 parent bc63250 commit a8a69ab
Show file tree
Hide file tree
Showing 8 changed files with 1,226 additions and 939 deletions.
51 changes: 45 additions & 6 deletions docs/client/winchester/attempt2.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -54,7 +54,7 @@ document.addEventListener("DOMContentLoaded", function(event) {
trigger: '#introduction',
start: 'top 66%',
end: 'bottom bottom',
scrub: true,
scrub: 0.5,
// markers: true,
}
})
Expand Down Expand Up @@ -85,28 +85,67 @@ document.addEventListener("DOMContentLoaded", function(event) {
const labelOutState = {x: "-100%", scale: "0", duration: duration}
const labelOutTiming = "" //'-=0.2'
const labelInState = {x: 0, scale: "1", duration: duration}
const labelInTiming = "+=0.2"
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", duration: duration})
.addLabel('support')
.to('#goal-wheel', { rotation: 90 })
.to('#goal-wheel', { rotation: 90, duration: duration },`support${labelOutTiming}`)
.add(gsap.to("#community",labelOutState),`support${labelOutTiming}`)
.add(gsap.to("#support",labelInState),`support${labelInTiming}`)
.addLabel('advocacy')
.to('#goal-wheel', { rotation: 180 })
.to('#goal-wheel', { rotation: 180, duration: duration },`advocacy${labelOutTiming}`)
.add(gsap.to("#support",labelOutState),`advocacy${labelOutTiming}`)
.add(gsap.to("#advocacy",labelInState),`advocacy${labelInTiming}`)
.addLabel('familiarity')
.to('#goal-wheel', { rotation: 270 })
.to('#goal-wheel', { rotation: 270, duration: duration },`familiarity${labelOutTiming}`)
.add(gsap.to("#advocacy",labelOutState),`familiarity${labelOutTiming}`)
.add(gsap.to("#familiarity",labelInState),`familiarity${labelInTiming}`)
.addLabel('end')
.to('#goal-wheel', { rotation: 360 })
.to('#goal-wheel', { rotation: 360, duration: duration })
.add(gsap.to("#familiarity",labelOutState),`end${labelOutTiming}`)

// Measures Wheel
const tlMeasures = gsap.timeline({
scrollTrigger: {
trigger: '#measures',
pin: true,
start: 'top top', // when the top of the trigger hits the top of the viewport
end: '+=1500px', // end after scrolling 500px beyond the start
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)
// delay: 0.1, // wait 0.2 seconds from the last scroll event before doing the snapping
ease: 'power4.inOut' // the ease of the snap animation ("power3" by default)
},
markers: true,
}
});

tlMeasures.addLabel("start2")
.add(gsap.to('#students',{ y:50, duration: 1}),"start2")
// .add(gsap.to('#goals',{ paddingTop: "0px"}),"start")
.addLabel("belonging")
.to("#belonging",{x: 0, scale: "1", duration: duration})
.addLabel('engagement')
.to('#goal-wheel-2', { rotation: 90, duration: duration },`engagement${labelOutTiming}`)
.add(gsap.to("#belonging",labelOutState),`engagement${labelOutTiming}`)
.add(gsap.to("#engagement",labelInState),`engagement${labelInTiming}`)
.addLabel('impact')
.to('#goal-wheel-2', { rotation: 180, duration: duration },`impact${labelOutTiming}`)
.add(gsap.to("#engagement",labelOutState),`impact${labelOutTiming}`)
.add(gsap.to("#impact",labelInState),`impact${labelInTiming}`)
.addLabel('interaction')
.to('#goal-wheel-2', { rotation: 270, duration: duration },`interaction${labelOutTiming}`)
.add(gsap.to("#impact",labelOutState),`interaction${labelOutTiming}`)
.add(gsap.to("#interaction",labelInState),`interaction${labelInTiming}`)
.addLabel('end2')
.to('#goal-wheel-2', { rotation: 360, duration: duration })
.add(gsap.to("#interaction",labelOutState),`end2${labelOutTiming}`)


// Priroities slider
Expand Down
43 changes: 31 additions & 12 deletions docs/client/winchester/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -56,18 +56,37 @@ <h2>Our Goals</h2>
</div>
</section>

<!-- <section class="spacer"></section> -->

<!-- <section id="measures">
<h2>Our Measures</h2>
<img src="./wheel1.svg" alt="" >
<div id="community">Creating communities for students to belong</div>
<div id="familiarity">We know our members; our members know us</div>
<div id="Advocacy">Engaging and representing our students</div>
<div id="support">Supporting students to flourish</div>
</section> -->

<!-- <section class="spacer"></section> -->
<section class="spacer"></section>


<section id="measures">

<div id="students" class="picture"></div>
<div class="ripple">
<h2>Our Measures</h2>
<div class="rotator">

<div class="description">
<div id="belonging" class="value">The % of students who say the Students&apos; Union helps them feel part of a community</div>
<div id="engagement" class="value">Engagement levels in all Students&apos; Union activities by number & satisfaction</div>
<div id="impact" class="value">Changes made by the University to improve student experience (As a result of Students&apos; Union activity)</div>
<div id="interaction" class="value">Levels of interaction with Student Union communications (both ways)</div>
</div>

<div id="goal-wheel-wrap">
<div class="logo"></div>
<img src="./wheel2.svg" alt="" id="goal-wheel-2">
</div>


</div>
</div>
</section>




<section class="spacer"></section>

<section id="priorities">
<h2>Our Priorities</h2>
Expand Down
176 changes: 170 additions & 6 deletions docs/client/winchester/parallax.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -172,9 +172,9 @@ section#introduction {
display: block;
background-image: url(./sports.png);
background-repeat: no-repeat;
background-position-x: left;
background-position-x: right;
background-position-y: top;
background-size: 120%;
background-size: 220%;
height: 700px;
position: absolute;
top: 0px;
Expand All @@ -194,9 +194,9 @@ section#introduction {
transform: translate(200px,0);
}
#goals .picture {
left: calc(50% - 512px);
left: calc(50% - 770px);
height: 500px;
background-size: 80%;
background-size: 90%;
}


Expand Down Expand Up @@ -312,7 +312,172 @@ section#introduction {
}


/* Measures */

#measures {
color: #fff;
padding-top: 300px;
/* width: 100%; */
/* mix-blend-mode:screen; */
border: solid 1px transparent; /* Triggers block */
/* border-color: hotpink; */
display: block;
overflow: hidden;
position: relative;
}
#measures h2 {
font-size: 3em;
text-transform: uppercase;
text-align: center;
margin-bottom: 1rem;
}

#measures .picture {
width: 100%;
border: 1px solid transparent;
/* background-color: hotpink; */
display: block;
background-image: url(./students.png);
background-repeat: no-repeat;
background-position-x: left;
background-position-y: top;
background-size: 220%;
height: 700px;
position: absolute;
top: 0px;
left: 0;
/* mix-blend-mode: screen; */
/* overflow: hidden; */
/* overflow: visible; */
max-width: var(--max-column-width);
margin: 0 auto;
}
@media screen and (min-width: 1024px) {
#measures {
padding-top: 100px;
height: 100vh;
}
#measures h2 {
transform: translate(-200px,0);
}
#measures .picture {
left: calc(50% - 770px);
height: 500px;
background-size: 100%;
border: dashed 1px greenyellow;
}


}

#measures .ripple {
margin-top: 200px;
background-color: var(--organisation);
background-size: cover;
clip-path: path('m5011.83,62.75c-43.56-14.48-51.33-36.84-100-49.33-15.12-3.88-55.5-12.28-101.33,0-49.96,13.39-49.96,36.23-100,49.33-9.77,2.56-51,12.49-98.67,0-50.03-13.1-50.01-35.93-100-49.33-10.15-2.72-52.7-13.19-101.33,0-49.44,13.41-49.23,36.08-98.67,49.33-46.99,12.59-88.17,3.09-100,0-50.67-13.23-50.8-36.15-101.33-49.33-10.92-2.85-52.39-12.6-100,0-49.92,13.22-49.94,36.07-100,49.33-48.41,12.83-90.4,2.54-100,0-49.95-13.23-49.94-36.07-100-49.33-9.82-2.6-51.75-12.83-100,0-49.96,13.28-50.04,36.21-100,49.33-46.95,12.33-87.78,2.82-98.67,0-48.98-12.69-56.07-36.08-101.33-49.33-16.3-4.77-35.62-7.66-58.29-6.41-15.62-.19-33.54,1.36-52.38,6.41-49.96,13.39-49.96,36.23-100,49.33-9.77,2.56-51,12.49-98.67,0-50.03-13.1-50.01-35.93-100-49.33-10.15-2.72-52.7-13.19-101.33,0-49.44,13.41-49.22,36.08-98.67,49.33-46.99,12.59-88.17,3.09-100,0-50.67-13.23-50.8-36.15-101.33-49.33-10.92-2.85-52.39-12.6-100,0-49.92,13.22-49.94,36.07-100,49.33-48.41,12.83-90.4,2.54-100,0-49.95-13.23-49.94-36.07-100-49.33-9.82-2.6-51.75-12.83-100,0-42.77,11.37-48.99,29.81-81.24,43.12-53.79,13.96-91.98,7.86-117.1-.49-43.56-14.48-51.33-36.84-100-49.33-15.12-3.88-55.5-12.28-101.33,0-49.96,13.39-49.96,36.23-100,49.33-9.77,2.56-51,12.49-98.67,0-50.03-13.1-50.01-35.93-100-49.33-10.15-2.72-52.7-13.19-101.33,0-49.44,13.41-49.22,36.08-98.67,49.33-46.99,12.59-88.17,3.09-100,0-50.67-13.23-50.8-36.15-101.33-49.33-10.92-2.85-52.39-12.6-100,0-49.92,13.22-49.94,36.07-100,49.33-48.41,12.83-90.4,2.54-100,0-49.95-13.23-49.94-36.07-100-49.33-9.82-2.6-51.75-12.83-100,0-49.96,13.28-50.04,36.21-100,49.33-46.95,12.33-87.78,2.82-98.67,0-48.98-12.69-56.07-36.08-101.33-49.33C74.73-.74,41.94-3.61.5,6.71v3865.33h5130.33V192.38c0,.11,0-6.16,0-25.26V62.75c-54.8,14.6-93.59,8.44-119,0Z');
padding: 100px 3rem 3rem;
height: calc(100% + 100px );
}

#measures .description {
position: relative;
overflow: visible;
height: 12rem;
width: 100%;
}
#measures .description .value {
position: absolute;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
left: 10%;
font-size: 4rem;
width: calc(80% - 2em);
padding: 1em;
margin-top: 1em;
/* opacity:0; */
transform: translateX(100%) scale(0,0);
/* scale: 0%; */
/* min-height: 5rem; */
}
#measures #belonging { transform: translateX(0%) scale(0.8,0.8); }
#measures #belonging { background-color: var(--purple); }
#measures #interaction { background-color: var(--red);}
#measures #impact { background-color: var(--orange); color: #000;}
#measures #engagement { background-color: var(--yellow); color: #000;}

#measures .rotator {
display:flex;
flex-direction: column-reverse;
align-items: center;
justify-content: center;
gap: 1rem;
max-width: var(--max-column-width);
/* overflow: hidden; */
margin: 0 auto;
}
#measures .ripple h2 {
font-size: 5rem;
}
.rotator #goal-wheel-wrap {
width: 80%;
padding-top: 80px;
background-image: url(./arrow.png);
background-repeat: no-repeat;
background-position-x: 45%;
background-position-y: 0px;
background-size: 200px;
position: relative;
}
.rotator #goal-wheel-wrap img {
max-height: 100%;
display: block;
}

.rotator #goal-wheel-wrap .logo {
width: 100%; height: calc(100% - 80px);
position: absolute;
background-image: url(./swirl.png);
background-position: center center;
background-repeat: no-repeat;
background-size: 15% 15%;
z-index: 10;
}
@media screen and (min-width: 1024px) {

#measures .ripple {
max-height: 100%;;
}

.rotator {
flex-direction: row;
align-items: center;
}
#measures .description {
width: 100%;
}
.rotator #goal-wheel-wrap {
/* max-width: 50%; */
width: 65%;
/* max-height: 100%; */
}
.rotator #goal-wheel-wrap img {
aspect-ratio: 1/1 ;
}
#measures .description .value {
font-size: 3rem;
margin-top:0;
}
.ripple {
border: solid 1px green;
}
.rotator {
}
.rotator #goal-wheel-wrap {
margin: -7rem auto 0;
}
}



Expand Down Expand Up @@ -340,8 +505,7 @@ section#introduction {
/* width: 100%; */
/* background-color: var(--logo-light); */
/* mix-blend-mode:screen; */
padding: 3rem;
display: none;


}

Expand Down
Binary file modified docs/client/winchester/sports.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added docs/client/winchester/sports1.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added docs/client/winchester/students.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
92 changes: 92 additions & 0 deletions docs/client/winchester/wheel2.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
1,803 changes: 888 additions & 915 deletions winchester/wheel.ai
View file

Large diffs are not rendered by default.

0 comments on commit a8a69ab

Please sign in to comment.