[Accordion animate height with Scrolltrigger]

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?

 

 

[Accordion animate height with Scrolltrigger]

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

[Scroll Trigger, with child position:sticky element]

Great, thanks

[Scroll Trigger, with child position:sticky element]

Thanks, great! that solves it (had no idea you could nest scrolltriggers!) could I also use pinReparent ?

[Scroll Trigger, with child position:sticky element]

Hi there,

This might be an edge case, but I'm trying to create a position:sticky element inside a scrolltrigger. It seems to incorrectly stick the position the "Sticky Bar" div as the parent uses a translate to pin the scrollTrigger (which affects the position of the sticky bar).

Are there any workarounds for this type of setup?

 

 

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