GSAP ScrollTrigger Nested Tabs / Accordions

[Something Strange]

Hi all, thank you in advance for checking out my post!

 

I have a video reference of what I'm trying to achieve here:

https://assets.codepen.io/191332/comp.mp4

 

And here is the Codepen demo I have started.

 

Note: Please view Codepen in a new tab / window and view in Full mode or increase the Codepen panel height to have a better visual of what is going on, ha!

 

I'm stuck on understanding a few things in my forEach loop of text blocks (right column)...

1. As noted in purple for each block, as the video shows, I'm trying to expand / show the first text block and collapse the other two.
2. Then as I scroll into the second block, collapse the first and last block.
3. As I scroll into the last block, collapse the prior two blocks, and keep this block expanded as you continue to scroll down the page.

 

And two more things:

1. Is there a way to get the current self.progress  / percent value for each block so I can animate their progress bar? This is the purple vertical line in the video example that grows / shrinks based on current scroll / scrub.
2. For the 3 text bocks, is it possible to pin or hold longer on the first block, say 50% of the timeline progress, and then the other two blocks for 25% each?

 

Hope this demo and video make enough sense and any help to point me in the right direction is beyond appreciated!

 

Thank you all so much!

 

See the Pen yLwZOYK by hotlines (@hotlines) on CodePen

Edited February 15 by Something Strange
One more question to add to my list...

[mvaneijgen]

This is indeed so hard to wrap your head around, because you're trying to optimise things before they are even working. So my approach is always make it simple, just start writing out the animation by hand and worry about making it dynamic later. When you've copied a piece of code for the third time you'll probably see a pattern emerging which you can optimise later!

 

Then get ScrollTrigger and throw it in the trash where it belongs.... 🤣, but you're building an animation, so worry about the animation at first and add ScrollTrigger only at points to test things or if you're done with the animation. 

 

14 minutes ago, Something Strange said:

Is there a way to get the percent value for each block to show current self.progress so I can animate a progress bar? This is the purple vertical line in the video example that grows / shrinks based on current scroll / scrub.

Also for this I would just add an animation and make the animation from 0 to 100% just in line with the other tweens that are playing. I don't have time to dive in further, but hope this gets you on the right path. Hope it helps and happy tweening! 

 

See the Pen KKEJMZO?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen

[AnthonyMarsh]

On 2/16/2024 at 4:10 AM, mvaneijgen said:

This is indeed so hard to wrap your head around, because you're trying to optimise things before they are even working. So my approach is always make it simple, just start writing out the animation by hand and worry about making it dynamic later. When you've copied a piece of code for the third time you'll probably see a pattern emerging which you can optimise later!

 

Then get ScrollTrigger and throw it in the trash where it belongs.... 🤣, but you're building an animation, so worry about the animation at first and add ScrollTrigger only at points to test things or if you're done with the animation. 

 

Also for this I would just add an animation and make the animation from 0 to 100% just in line with the other tweens that are playing. I don't have time to dive in further, but hope this gets you on the right path. Hope it helps and happy tweening! 

 

 

Thanks, I will try it as you explained and if I still face issues, then I will ask by starting my own thread. I hope you won't mind. As a casino enthusiast, discovering the 1 Dollar Deposit Casino through CasinosAnalyzer  https://casinosanalyzer.ca/low-deposits/1-dollar-deposit-casino has been a revelation. This affordable option has opened up a world of thrills without breaking the bank. The convenience and accessibility of this low deposit casino make it an ideal choice for those seeking budget-friendly entertainment.

Thanks, I will try it as you explained and if I still face issues, then I will ask by starting my own thread. I hope you won't mind.

[Something Strange]

Hi @mvaneijgen!

 

Sorry for such a delayed reply - this project I'm on is massive, had to prioritize 100 other site features before I could try out your advice, hah.

 

On that note, I got it working today! And yes, starting simple as you suggested was the advice I needed, thank you!