This repo is for the development of a scrolltriggered interaction for a Dev site designed by Gil Huybrecht here.
- HTML5
- CSS3
- JavaScript/GSAP
To get the sequencing and timing as close as possible to the design, I downloaded the video and watched it at a playback speed of 0.25. This is an approach I learnt from Carl.
I started by using GSAP to set the total height of the stack(front & back text) wrapper and the bottom wrapper(01 & 02 text) to the height of one of the text (front & 01) respectively:
gsap.set(".stack__wrapper", { height: () => document.querySelector(".stack__wrapper--word").offsetHeight + "px" });
gsap.set(".bottom__wrapper", { height: () => document.querySelector(".first__list").offsetHeight + "px" });The next step was to select all the letters in the words to be animated using the gsap.utils.toArray method.
Then I created the timeliine and tweens for the animation:
// Timeline containing all transform tween
let transformTl = gsap.timeline({ defaults: { stagger: 0.1, ease: "expo.inOut", duration: 1.3, }})
.to(frontendLetter, { yPercent: () => -120 }, 0)
.to(backendLetter, { yPercent: () => -120 }, 0)
.to(firstLetter, { y: () => -document.querySelector(".first__list").offsetHeight + "px" }, 0)
.to(secondLetter, { y: () => -document.querySelector(".first__list").offsetHeight - 3 + "px" }, 0)All tween starts at the same time and I achieved this by using the absolute positioning of "0" on them.
Finally, I created a standalone scrolltrigger and tied the transformTl timeline to it.
// Scroll trigger animation to play the timeline
ScrollTrigger.create({
trigger: ".trigger__animation",
start: "top 20%",
animation: transformTl,
onLeaveBack: () => transformTl.reverse(),
})- LinkedIn - Uzochukwu Okafor
- Twitter - @uzoway_
Huge credits goes to Gil Huybrecht🙌 who created the design which I have coded.