ScrollTrigger Pin an element and Change that element's content on Scroll

[Atharv varshney]

Hi,
I want to make a simillar effect like the video attached and this link: https://www.spacex.com/vehicles/falcon-9/

 

I want a section to be pinned and when I scroll it should remain pinned and after some scrolling the content should change by fading as shown in the video.  Like in the video, the text on the left changes to a table and the right image also changes. This animation should also be working in reverse.

 

I have attached a codepen, where I was able to pin and fase in a section but I am not able to hide the previous pinned section and change the content of it. Please suggest me a way through which I can implement this. Any suggestion is highly appreciated.

Thanks

See the Pen VwVZwVM by Atharvvarshney (@Atharvvarshney) on CodePen

[Cassie]

Hey there - there are quite a few parts to this and I'm afraid we don't have the resources to build out animations to spec, from video examples.

 

Here's a starting point though. I would suggest building out one timeline, don't worry about loops and stuff, just make a simple timeline that does what you need. Get it working first, then you can make the code more succinct later if you need to.

See the Pen poQzEVb?editors=0010 by GreenSock (@GreenSock) on CodePen

 

There are a lot of demos over here that may help too.
https://greensock.com/st-demos/page/2/?d=19

This may help if you're planning on doing video scrub like in the video you linked to.
 

Good luck!

[Atharv varshney]

Hi, 
Thanks for your reply. I was able to implement this:

See the Pen KKrPxXp by Atharvvarshney (@Atharvvarshney) on CodePen

Here I implemented what I want just that the image are loading after the text elements are loaded. Please suggest me a way through which I can make this working.

Also I found this pen in the examples. I think this could be useful. Can you also suggest me a way through which I can implement this into my code?

See the Pen 6a2480c123d88dc391faba0ea5cc590f by akapowl (@akapowl) on CodePen

Thanks

[GreenSock]

You might want to check out @Carl's excellent training resources, like this video that he released recently: 

There's a lot more when you sign up at https://www.creativecodingclub.com/courses/FreeGSAP3Express?ref=44f484 (it's an outstanding value)