benpickle

Yeah, that was kind of my conclusion as well. Was just hoping there might be a simple mistake I was making. I will regroup and try another tack. Thanks a ton for the info and the prompt replies!

OK, here is the same pen, but I have now added a 100vh div above and below the div containing the carousel. That is the only difference. Note how the carousel no longer appears, and all the animations are thrown off by the fact that the carousel is now in a div rather than absolutely positioned and pinned to the only div on the page. What I am looking for is the setting that assigns the scrolling context of the carousel to the div that contains it, rather than to the whole page Put another way, I want the carousel to work even when it is not the only section in the document. Is that possible with this strategy? https://codepen.io/benpickle/pen/qBgMQrr

I'm having some trouble getting this example to work in my page. Basically, the non-draggable part of the animation is built around a scrolltrigger so it keys off the scrolling of the entire page. But I need this piece to be contained in a div toward the bottom of the page. If I remove the scrollTrigger stuff, the Draggable animation works, but the Prev and Next buttons no longer advance the carousel. How can I make it so the ScrollTrigger animation only works within the div containing the carousel? Does that question make sense? I'm sure it's a simple setting but i just can't figure it out.

This example is really helping me a lot. I am trying to use it in the context of a parent div, and have the parent div scroll off the screen after the reveal of the final slide (so rather than infinite scrolling, the entire section containing these slides would pass off the screen vertically after the final slide, and if the user scrolled back to the top, the slides would again animate in reverse order). Does that make sense? Any thoughts on how to make that happen? I was thinking about incorporating the ScrollTrigger plugin to pin and unpin the container div, but not sure hat's the way to go.