Alex Raldugin

Many thanks for your response! Try to do it based on your advice. But I think about this concept AKA stop panel https://codepen.io/GreenSock/pen/NWLVMQG

Hello, community and its gurus. I kindly ask for help with some aspects of using ScrollTrigger, namely (containerAnimation), as well as a few other questions. I have a page with pinned horizontal scroll sections and three slides in it (in my example, 100dvw wide). Each slide has its own internal animation. I create step-by-step animation using a timeline with .to(element, {props…}) When the horizontal scroll container is pinned, I animate the mask (cliPath) on the first slide. When it's finished, I move on to the second slide (moving the container to the left by -window.innerWidth, animating the contents of the second slide), and when that's done, I move on to the third slide (moving the container to the left by -window.innerWidth * 2), where I want to have an animation for images in carousel container. During initialization, I use gsap.set to set the positions of the carousel behind the right border of the third slide (dashed by green line), and I want to scroll this carousel of images from left to right inside this slide... I attached ScrollTrigger to each element (image) of the carousel so that when each element passes a certain position in the viewport, it does something (move y: -50 in this example). This action is fired before I saw this carousel. And my scenario doesn't work. I don't understand why this is not working. And, by the way, I don't see markers, although this option is enabled (markers: true). I also have some additional questions: How to correctly calculate the end position (end: ...) of ScrollTrigger for horizontal scrolling with slides, if there is animation inside the slides in addition to scrolling from right to left (the length of the horizontal scroll)? Is it by adding up the length of all animations? Is there any way to temporarily disable scrolling (for example, if I need to open a popup with an enlarged image), and then, when closing this popup, enable scrolling for the continuation of GSAP animation? When animating masks (on the second slide), there is some shaking of the images, and I don't understand what it is. Thank you very much for your great product, which opens up great possibilities for visual communications.