Fade in and fade out animation on element based on scroll position

[OrganicBlue]

Hello everyone.

 

I'm trying to make the elements have a fade out animation (inverse to fade in) when the parent element reaches 40% of the screen, but the more I mess with it, the worse it works.

 

It would be the same fade in animation, but in reverse.

 

Thanks!

See the Pen zYjVBdy?editors=1000 by Satelier-Diego (@Satelier-Diego) on CodePen

[Rodrigo]

Hi,

 

Maybe this achieves what you're after:

pinGroupContent.forEach((e, i) => {
  gsap.from(e, {
    opacity: 0,
    y: '+=100',
    duration: .4,
    lazy: false,
    scrollTrigger: {
      trigger: e,
      start: 'center 80%',
      end: "bottom 40%",
      toggleActions: "play reverse play reverse",
      markers: true
    },
  });
});

 

Let us know how it works.

 

Happy Tweening!

[OrganicBlue]

Hi Rodrigo, thank you for your reply.

 

That's close, but in the "fade out" I'm trying to make the element go up (not down) and change opacity. I don't know if this approach works.

[Rodrigo]

Hi,

 

Ok so in that case instead of creating a GSAP instance with ScrollTrigger, is better to just use a ScrollTrigger instance and leverage the ScrollTrigger's callback system to run the animations. Maybe something like this?

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

 

Hopefully this helps.

 

Happy Tweening!

[OrganicBlue]

Thank You Rodrigo, that's exactly what I was looking for.

 

Have a great week.