Consecutive Scroll Animations with One Ingredient

Ivan Gorbunov designed a lovely idea some time in the past the place this one component will get animated all through totally different layouts:

This made me marvel how easy it could be to animate a component throughout numerous waypoints whereas scrolling, making it adapt to the spots utilizing GSAP’s Flip.

It turns on the market’s a really useful GSAP demo that demonstrates this completely: GSAP ScrollTrigger Consecutive Scrub Flips. So that is mainly exhibiting easy methods to create a consecutive flip animation with ScrollTrigger and scrubbing.

See the Pen
GSAP ScrollTrigger Consecutive Scrub Flips by GSAP (@GreenSock)
on CodePen.

I went forward and created slightly demo with a fancier look, so right here is an exploration of that idea.

In our HTML we set the principle component to be a div with class “one”:

<part class="content material content--inital">
  <div class="one" model="background-image:url(img/fundamental.jpg)"></div>
</part>

Within the consecutive sections we outline a placeholder component (“content__img”) and magnificence the format with that component in thoughts. We additionally give that component a data-attribute referred to as “data-step” which is able to function indicator that this is a component we need to use as waypoint in our JavaScript:

<part class="content material content--center content--blend">
  <div data-step class="content__img"></div>
  <h1 class="content__title font-alt"><span>Seraph</span><br><span>Kamos</span></h1> 
</part>

// Create a GSAP timeline with ScrollTrigger for the Flip animation
const tl = gsap.timeline({
  scrollTrigger: {
    set off: parentElement, // Set off animation based mostly on the mum or dad component
    begin: 'clamp(heart heart)', // Begin animation when mum or dad is within the heart of the viewport
    endTrigger: stepElements[stepElements.length - 1], // Finish on the final step component
    finish: 'clamp(heart heart)', // Finish animation when the final step is centered
    scrub: true, // Synchronize animation with scroll
    immediateRender: false
  }
});

// Add Flip animations to the timeline for every state
states.forEach((state, index) => {
  const customFlipConfig = {
    ...flipConfig,
    ease: index === 0 ? 'none' : flipConfig.ease // Use 'none' easing for step one
  };
  tl.add(Flip.match(oneElement, state, customFlipConfig), index ? '+=0.5' : 0);
});

Take a look at the code for the opposite bits and have enjoyable exploring and taking part in round with this!

Thanks for checking by!