Staggered Accordion

[GIGDigital]

I'm looking to create a pinned accordion that opens and closes each row one by one as you scroll.

 

I've used stagger to get to the below, and I know thats not correct, however I'm at a loss as to where to go next.

 

I want item 1 to open, then item 1 to close, then item 2 to open, item 2 to close and so on.

 

Whereas at the moment item 1 opens, then item 2 opens, then 3, then 4, then 1 closes, etc etc.

 

Thank you in advance!

See the Pen poVRMxE by Robhern135 (@Robhern135) on CodePen

[Cassie]

Heya, thanks for the demo. You were almost there! Just a little adjustment to the timings...

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

[GIGDigital]

Hi Cassie,

 

Thanks so much for your help. Is the change to the timings so that the duration of the .from() matches the repeat number?

 

If I were to try to expand on this ever so slightly, and want to add a label between each repeat (so I can add click events to scrollto them so they work like a regular accordion too), is that something I can achieve in this format? Or would I need to write each from and to our separately and then add the labels in the TL?

 

Thanks!

 

- Rob

[Cassie]

Sure thing!

 

And not entirely, repeat: 1 is saying 'repeat once'.

 

The duration is 1 second and the stagger time for each of them is 2 seconds. So the tween plays forward (1s) then plays back (2s) then the next one starts (at the 2s stagger time)

You can add labels in at an absolute time, Ive added a callback in so you can see where those times would be...

 

See the Pen ExLWYVL?editors=0011 by GreenSock (@GreenSock) on CodePen

[GIGDigital]

Hi Cassie,

 

That's amazing, thank you.

 

Just a question about the numbers in the console log, they're coming out as like 0.4245833333333333. I'm assuming I wouldnt do tl.addLabel("accordion-1", 0.4245833333333333)? 

 

With the current setup could I just add a label like so tl.addLabel('label-1', 1).addLabel('label-2', 3) and so on?

 

Thanks for your continued help here its really appreciated.

[Thallow]

On 9/16/2022 at 8:26 PM, GIGDigital said:

Hi Cassie,

 

That's amazing, thank you.

 

Just a question about the numbers in the console log, they're coming out as like 0.4245833333333333. I'm assuming I wouldnt do tl.addLabel("accordion-1", 0.4245833333333333)? 

 

With the current setup could I just add a label like so tl.addLabel('label-1', 1).addLabel('label-2', 3) and so on?

 

Thanks for your continued help here its really appreciated.

Oh, I get the same question. With the same setup as above, could I add a label like so tl.addLabel('label-1', 1).addLabel('label-2', 3) and so on??

tiny fishing

[Rodrigo]

Hi @Thallow and welcome to the GreenSock forums!

 

Keep in mind that when an animation is controlled by ScrollTrigger scrub the duration will only indicate the amount of scroll pixels the particular tween will last, so to put it in a different way the percentage of the total animation. So yes you can add labels at positions that are whole numbers, just be 100% sure that the duration of your tweens match that particular pattern, meaning that if you want an animation to start as soon as the previous ended, then the duration of each instance has to match the amount of time between labels. So if you add a label one second apart of each other, then the duration of the animation at that particular label has to be 1 second.

 

Here is a super simple example of that:

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

 

If you check the console you'll see the Timeline's labels object.

 

Hopefully this helps.

Happy Tweening!

[Hitendra]

On 9/16/2022 at 5:28 PM, Cassie said:

Sure thing!

 

And not entirely, repeat: 1 is saying 'repeat once'.

 

The duration is 1 second and the stagger time for each of them is 2 seconds. So the tween plays forward (1s) then plays back (2s) then the next one starts (at the 2s stagger time)

You can add labels in at an absolute time, Ive added a callback in so you can see where those times would be...

 

 

 

Is there any way we can add classes when the accordion open?? so that we can style the active accordion

 

[GreenSock]

Sure, you could use some custom logic like this: 

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

[Hitendra]

 

11 hours ago, GreenSock said:

Sure, you could use some custom logic like this: 

 

you are life saver!!!!