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 🙂

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... https://codepen.io/microlinofire/pen/qBgeeKQ

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.

Perfect, thank you very much

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

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 https://codepen.io/microlinofire/pen/eYxqEqj

Many thanks for the tip and the solution, that's exactly what I was looking for. It's a bit confusing that it still works with to() 🤔

I have read through the most common errors where the problem is dealt with, I have created a simple example in which to() is currently used. But I need it the other way around, i.e. from() and wanted to know if this is really only possible with fromTo() or if there is a better solution. https://codepen.io/microlinofire/pen/wvNYyme

Oh ****, with the ref I also tried, but forgot the value 🙃 Now it works, thanks

JS Console: Uncaught ReferenceError: ScrollTrigger is not defined You have to register the scrolltrigger first

Hmm, ok. Thanks for the explanations, then I have to find another solution.

Sorry. Since this is not a bug I thought maybe someone knows the issue. Attached is a customized example. I need .my-section as trigger instead of the box https://stackblitz.com/edit/vitejs-vite-dbcyna?file=src%2FApp.vue

How can I use my section as a trigger in the gasp.context? Here is the rough situation const element = ref(); gsap.context((self) => { const item = self.selector('.item'); elementTl.from(item, { opacity: 0, y: '100%' }); ScrollTrigger.create({ animation: elementTl, trigger: ??? }); }, element.value); <section ref="element" class="my-section"> <div class="container"> <div class="item"></div> </div> </section>

"Also I've found that normal users don't resize their browser, that is only something developers do! But for my project I need it on resize 🤷‍♂️

sorry for the late reply. In the video you can see that the blue does not adjust during the resize, only afterwards. video.mp4

For pinned elements the width does not adjust during resize because both the element and the pin-spacer container therefore work with max-width. if I work with both width: 100% !important; and min-width: 100% !important; it works. Is there a build-in solution for this? PS: Is not my CodePen demo, but with the blue bar the problem is good to see