ScrollTrigger animation, how is it made

[Vander]

Hi!

I've seen an animation made with Swiper.js (i think) which I'd like to replicate just using ScrollTrigger, but found some questions/doubts.

The animation is here (https://fuegocaminaconmigo.com/projects/) and i think i'd just scrolltrigger a section with images, pin it to the top, and scroll horizontally will get similar effect of this one (am I right?). 

(Currently idk why isn't working on my codepen haha)

 

Then, the tricky stuff i don't see how to do it, is to dwarf the blocks/slides with the scroll while moving horizontally. Can any one gimme some advice or help me?

See the Pen OJBwqQa by EricCV (@EricCV) on CodePen

[Rodrigo]

Hi,

 

Your making the wrong calculation for the horizontal movement of the container, I guess you meant this:

window.innerWidth - slidesSection.clientWidth

Then you don't need gap between the blocks just scale them down in order to create the separation. Finally in this case you can use an onUpdate callback and a delayedCall:

const slidesSection = document.querySelector(".container");
const slidesContainer = document.querySelector(".scrolling");
const blocks = gsap.utils.toArray(".block");
let timer;

gsap.to(".container", {
  scrollTrigger: {
    trigger: slidesContainer,
    scrub: true,
    pin: slidesContainer,
    start: "top+=1 top",
    end: "+=100%",
    markers: true,
    invalidateOnRefresh: true,
    onUpdate: (self) => {
      timer && timer.kill();
      gsap.to(blocks, {
        scale: 0.9,
        transformOrigin: "center center",
        duration: 0.3,
        ease: "none"
      });
      timer = gsap.delayedCall(0.3, () => {
        gsap.to(blocks, {
          scale: 1,
          transformOrigin: "center center",
          duration: 0.3,
          ease: "none"
        });
      });
    }
  },
  x: () => window.innerWidth - slidesSection.clientWidth,
  ease: "none"
});

Here is a fork of your demo:

See the Pen zYmJJrZ by GreenSock (@GreenSock) on CodePen

 

Hopefully this helps.

Happy Tweening!