emattias

When you say pin on the x axis you mean the technique where the x animation of the sections is stopped and some other animation is done? But the example here does that also but there the start values work, why is that? What am I missing? Ok so if horizontal scroll was used it would work? How would that be done?

Without scrollsmoother I could do Scrolltrigger.maxScroll(scrollTween.scrollTrigger.scroller) and get the same value as if I scrolled to the end and ran scrollTween.scrollTrigger.scroll() But with scrollsmoother those numbers are not the same. How do I get the max scroll when using scrollsmoother?

Hmm if I add a label where I want to trigger the animation is there a way to run a function when that label is crossed? I guess a way to do this could be to use Intersection observer but it would be nice to find a gsap pre-calculated way of doing it.

@GreenSock Hmm, I'm not following. The animated boxes that use containerAnimation and scrolltrigger in @Tosos example above are also inside pinned containers. Could someone explain to me why that works and my examples done? Whats the difference that breaks my examples?

I was able to reproduce the same thing (incorrectly moving start marker) by forking @Cassie and @Rodrigos demo from here and adding my ScrollTrigger.create({...}) code (notice how the start marker is not triggering on center centerlike I set in ScrollTrigger.create({...}) code): https://codepen.io/emattias/pen/MWLPJyd What am I missing? How are you supposed to start/end an animation reliably in these horizontal scrolling pages with interrupting animations in between. Its the adding of the inbetween animations that seems to mess things up. Is it a gsap bug or do you just need to add some config?

Ok I removed all the commented out code and only kept the absolute minimum to reproduce the bug here: https://codepen.io/emattias/pen/jOdebPX I also recored a video showing it. Notice how the | start marker moves at a different speed than the scrolling. What is going on and how do I fix it? CleanShot 2023-11-30 at 17.23.01.mp4

@GSAP Helper Here's a codepen showing how the start marker moves when you scroll: https://codepen.io/emattias/pen/zYeJJxd How can I make it actually trigger onEnter on center center of the second section like I set start to? 😅

Hmm do you have an animated trigger there? I would like to know how to do this: "just offset the start/end values according to how far you're animating the trigger."

I have done a horizontal scroll and inside one of the sections I want to do a scrubbed animation when the user gets to that section. The `start` and `end` values dont work. The only thing that has worked is to scroll to the section and take the `window.scrollY` value and use that. But that has to be changed when adding/removing sections. here you say this: What does that mean? Do you have examples of "You should avoid animating the trigger element horizontally or if you do, just offset the start/end values according to how far you're animating the trigger." ?

Thanks! For me the heading disappears before being moved to original position. ?

thanks @mikel but how do I make the move from the pinned state be animated to the original position ( and have the animation work while the user keeps scrolling ?)?

nice, thanks! Is it possible to make the end be a certain amount of seconds after the start was triggered rather than a scroll position?

heres it is: https://codepen.io/emattias/pen/gOrwypQ I would like the "GSAP Starter Template" to animate to its original position instead of ending in the `end` position

Is it possible to have an element be pinned to the bottom of the viewport while scrolling and then after a certain time (or reaching end position) animate it to its original position in the dom? I tried doing: scrollTrigger: { pin: false, }, it the .to() of the pinned target but that did not work ?