Pin container and animate content

[LizF]

Hi!.

 

On my demo the animations for .block_2 and .block_3 start when the respective containers (.card_2 and .card_3) hit the top.

I understand that happens because the lines:

 

trigger: ".card_2",
start: "top top",

However, I would like the animations for .block_2 and .block_3 start say 200px earlier.

In other words, how can I set 2 scrollTriggers, one to pin the containers cards. And another scrollTrigger to start the animation for the blocks earlier?

Thanks in advance.

 

 

 

See the Pen NWOMbWz by Liz-Franco-the-typescripter (@Liz-Franco-the-typescripter) on CodePen

[Rodrigo]

Hi @LizF and welcome to the GreenSock forums!

 

Just add an extra set of ScrollTrigger instances that take care of the container's pinning:

ScrollTrigger.create({
  trigger: ".card_2",
  start: "top top",
  end: "+=200",
  pin: true,
});

gsap
  .timeline({
  scrollTrigger: {
    trigger: ".card_2",
    start: "top top+=200",
    end: "+=200",
    scrub: true,
    markers: true,
    id: "2",
    toggleActions: "restart pause reverse pause"
  }
})
  .from(".block_2", { opacity: 0, duration: 1 });

ScrollTrigger.create({
  trigger: ".card_3",
  start: "top top",
  end: "+=200",
  pin: true,
});

gsap
  .timeline({
  scrollTrigger: {
    trigger: ".card_3",
    start: "top top+=200",
    end: "+=200",
    scrub: true,
    markers: {indent: 150},
    id: "3",
    toggleActions: "restart pause reverse pause"
  }
})
  .from(".block_3", { x: 500, duration: 1 });

Here is a fork of your codepen example:

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

 

Hopefully this helps.

Happy Tweening!

[LizF]

Ah thank you so much @Rodrigo

👏