Scroll Triggered Interaction for a Dev site

This repo is for the development of a scrolltriggered interaction for a Dev site designed by Gil Huybrecht here.

Table of contents

• Overview
• My process
  • Built with
  • Approach
• Author
• Credit

Overview

My process

Built with

• HTML5
• CSS3
• JavaScript/GSAP

Approach

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(),
})

Author

• LinkedIn - Uzochukwu Okafor
• Twitter - @uzoway_

Credit

Huge credits goes to Gil Huybrecht🙌 who created the design which I have coded.