Scrolltrigger overflow hidden problem

[Lava]

I have several elements with scroll trigger animations which are in a container that can be opened and closed. The overflow hidden seems to confuse the triggers. I hope the problem is clear in the demo as it is difficult to explain exactly

See the Pen eYxqEqj by microlinofire (@microlinofire) on CodePen.

[mvaneijgen]

You can call ScrollTrigger.refresh() when you open/close the toggle. If you're going to change the toggle to open smoothly with GSAP, because now it jumps, put the ScrollTrigger.refresh() on the onComplete of that tween/timeline. Hope it helps and happy tweening! 

 

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

[Windpixel]

34 minutes ago, Lava said:

I have several elements with scroll trigger animations which are in a container that can be opened and closed. The overflow hidden seems to confuse the triggers. I hope the problem is clear in the demo as it is difficult to explain exactly
 

Hi There, 

I opened your code pen and the toggles appear to be opening, scrolling down and scroll trigger scrub works on each item, as per the from props.

Could you add a little more detail please as to what we should expect to see so we can recreate the error. Thank you

[Lava]

15 minutes ago, Windpixel said:

Hi There, 

I opened your code pen and the toggles appear to be opening, scrolling down and scroll trigger scrub works on each item, as per the from props.

Could you add a little more detail please as to what we should expect to see so we can recreate the error. Thank you

Hy

In my example, it doesn't work properly.
When opening the first area, everything still works, but if this remains open, the second area no longer functions.

mvaneijgen seems to have already solved the problem

[Lava]

39 minutes ago, mvaneijgen said:

You can call ScrollTrigger.refresh() when you open/close the toggle. If you're going to change the toggle to open smoothly with GSAP, because now it jumps, put the ScrollTrigger.refresh() on the onComplete of that tween/timeline. Hope it helps and happy tweening! 

 

 

 

Perfect, thank you very much

[Lava]

Damn, it doesn't work on my real project. As soon as I click on the first toggle button, all subsequent items in the elements lose any scroll trigger context, even the markers are then gone. I can't reconstruct the error on Codepen yet.

[Windpixel]

2 minutes ago, Lava said:

Damn, it doesn't work on my real project. As soon as I click on the first toggle button, all subsequent items in the elements lose any scroll trigger context, even the markers are then gone. I can't reconstruct the error on Codepen yet.

If they markers are gone, that might suggest Scroll Trigger hasn't initiated correctly. have you got a live demo of the RL project?

[Lava]

No live demo. But I was able to reproduce the error better in the codepen. With the second, opened element everything works and the markers are also visible, but as soon as the first element is opened, the second one doesn't work anymore.

ScrollTrigger.refresh(); Solves the problem on Codepen, but not in the project

I'll put my demo in the project in the hope of finding out more...

See the Pen qBgeeKQ by microlinofire (@microlinofire) on CodePen.

[Lava]

After adding the demo to the project I was finally able to fix the error, the solution is definitely ScrollTrigger.refresh().
I made the open/close now with a timeline animation in which the triggers are refreshed as recommended by @mvaneijgen onComplete.
Thanks to all ?