Staggered Accordion With The First Row Open

[Shumais]

Hey,

I'm trying to create an accordion similar to this one. 

I want the first row to be open initially and the rest of the rows open as the user starts scrolling, i was thinking of triggering active classes, but don't seem to find a method to do that.

Thank You in advance!

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

[mvaneijgen]

Hi @Shumais welcome to the forum! 

 

Can you maybe share what you've already tried, that way we can see your thought process and better help you understand GSAP. Even a pen that doesn't work is a great starting point!

[Shumais]

Hi @mvaneijgen,

I am developing a website for a client and there is a section where i want to open the accordion on scroll with the initial one open. Here is the link for the codepen.

See the Pen oNyJGxo by rrichie551 (@rrichie551) on CodePen

I'm using scrolltrigger for the functionality, but can't wrap my head around on how ill trigger 'active' class on scroll using scrolltrigger.

Thank You in Advance!!

[mvaneijgen]

The best thing to do 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.

 

So that's what I did for your pen at the moment. This way I can focus on the animation at first, right now I've build it in a for loop, but maybe it's better to just write the whole timeline by hand if you want custom logic per item, but this would be the general idea, just toggle the classes onStart and onComplete. Hope it helps and happy tweening! 

 

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

 

I took some logic form the following video by our @Carl which is a really smart way to work with staggers