Accordion animate height with Scrolltrigger

[deJardine]

Hi GSAP team,

 

I'm trying to animate an array of accordion elements on screen. As each accordion enters the viewport, I want it to animate to height:auto sequentially on scrub (no pinning)

 

Each 'drawer' start point should be the end of the previous sibling element.

 

The problem I'm running into is that the start and end triggers are not working as expected because of the initial closed height of each item on first load, so as a consequence of this all accordions open at the same time.

 

Have tried running an 'update' after complete but had no luck with that, am I approaching this incorrectly? 

 

Any ideas would be great, 

 

Thanks

 

 

 

 

 

See the Pen VwxNvrP by grafiknz (@grafiknz) on CodePen

[Rodrigo]

Hi,

 

This is a regular issue with ScrollTrigger. You are animating the height of the previous element(s) which in order affects the next ones' animations. The only solution (and not exactly a good one) is to refresh all the following ScrollTrigger instances as the previous is either completed or being updated, which probably could still cause some issue with the start and end points or a performance issue. On top of that you are animating the trigger element, also something that you should avoid.

 

If I was you I would try to create a single timeline to expand and collapse all the elements, control that single timeline with ScrollTrigger and pin the container. Here is a live example of such approach:

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

 

Hopefully this is a viable solution for your case.

 

Let us know if you have any other question.

 

Happy Tweening!

[deJardine]

Thanks for the reply, I was trying to avoid pinning as had already seen that example and this effect is quite different to what I'm trying to achieve.

 

Perhaps things could be easier if I was animating each item to a set height? That way a dedicated start and end marker could could be set with an offset value for each item (positioned with CSS and increasing each nth-of-type)

 

What do you think?

 

 

[Rodrigo]

Hi,

 

Yeah I see the point. A possible solution would be to add the height of the previous element in order to set the starting and ending points correctly.

 

I updated the codepen:

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

 

Hopefully this is a good enough starting point.

 

Let us know if you have any other question.

 

Happy Tweening!