Sticky Accordion with fade animation of text and image when scroll

[HectorSS]

It maybe accordion or maybe I need to do slider which will change slide on scroll with fade. I don't know. Can someone provide me demo?

[mvaneijgen]

What have you tried already? We love to see what you can come up with, that way we can see your thought process and thus better help you understand the tools!

 

The best thing to do when working with ScrollTrigger is to remove it! This seems counter intuitive, but ScrollTrigger is just animating something on scroll, so just focus on the animation at first and only when you're happy with the animation add ScrollTrigger back in. This way you can focus on one part at a time and it will save a lot of headache when debugging.  
  
Most of the ScrollTrigger effects you see are just moving things on the y-axis instead of scrolling them, then hooking that animation to ScrollTrigger will give the illusion of scrolling, but they are really just animating! Getting to grips with this knowledge will make it so much easier to create all kinds of effects, I've written a whole post about it, check it out:

Here is a starter template which loads all the plugins 

 

See the Pen aYYOdN by GreenSock (@GreenSock) on CodePen.

 

Hope it helps and happy tweening! 

[Rodrigo]

Hi,

 

Maybe these demos can help you getting started:

 

See the Pen wvZqwyg by GreenSock (@GreenSock) on CodePen.

 

See the Pen pomvabo by GreenSock (@GreenSock) on CodePen.

 

Happy Tweening!

[HectorSS]

4 hours ago, Rodrigo said:

Hi,

 

Maybe these demos can help you getting started:

 

 

 

 

 

 

 

Happy Tweening!

Second example is the best. Thanks a lot