how to display accordion while scolling

[Kari98]

Hey! I'm trying to create something like this https://fix.studio/ , however I'm no able to make the images already visible and hide them as you scroll down. 

See the Pen rNZNZqp by karitorrese (@karitorrese) on CodePen

[Rodrigo]

Hi @Kari98 and welcome to the GreenSock forums!

 

That is a really nice example but not exactly something super simple to achieve. There are quite a few moving parts and your setup it doesn't seem the best IMHO.

 

I think the best course of action right now is to get the HTML/CSS correctly, then create the GSAP animation(s) and finally add ScrollTrigger to the mix. ScrollTrigger should be the last step of the whole process as explained in this video:

Also I find your example quite similar to the one in this thread, so you could use it as a starting point:

But I really recommend you to start with one step at a time. Unfortunately we don't have the time resources to build an entire working app for every user. But as you get going with your project we're here to solve any GSAP related question you have.

 

Happy Tweening!

[Kari98]

Hi! thank you for the help, the link you gave me really help. 

 

So right now I have the scrolling effect working as it should, It's leaving a huge bank space after it finishes, how can i stop this from happening?

 

 

 

[GreenSock]

Already answered on your duplicate post: