containerAnimation with animated trigger

[emattias]

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." ?

[Toso]

check this demo i think that's what you need 

 

See the Pen NWMxRvM by GreenSock (@GreenSock) on CodePen

 

 

 

Don't forget to check the other demos and collections you will find some cool stuff 😉

[emattias]

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."

[GSAP Helper]

For example, if you're animating the trigger element 100px up, you could add 100px to the end to compensate. If you still need help, please make sure you provide a minimal demo (like a CodePen or Stackblitz) that illustrates the issue and we'd be glad to look at any GSAP-related stuff. 

 

Here's a starter CodePen that loads all the plugins. Just click "fork" at the bottom right and make your minimal demo: 

See the Pen aYYOdN by GreenSock (@GreenSock) on CodePen

 

Using a framework/library like React, Vue, Next, etc.? 

CodePen isn't always ideal for these tools, so here are some Stackblitz starter templates that you can fork and import the gsap-trial NPM package for using any of the bonus plugins: 

• React (please read this article!)
• Next
• Svelte
• Sveltekit
• Vue
• Nuxt

[emattias]

@GSAP Helper Here's a codepen showing how the start marker moves when you scroll: 

See the Pen zYeJJxd by emattias (@emattias) on CodePen

 

How can I make it actually trigger onEnter on center center of the second section like I set start to? 😅

[mvaneijgen]

Hi @emattias, I find your pen really hard to follow, there is a lot of commented out code and there are 200 lines of JS. The example @Toso posted is exactly what you're looking for right? I've dumped down the demo and just kept the relevant parts for your example.

 

So box-2 will animate when the triggers are met in a scrubbed fashion. And there is a global ScrollTrigger that will just move the whole container to the left of the screen.

 

Try changing the code in the below demo and try to break it until you understand how it works. Or if something is not logical for you, post what changes you've made with what you think it should do and what it is doing now. Hope it helps and happy tweening! 

 

See the Pen mdvzdXL?editors=1000 by mvaneijgen (@mvaneijgen) on CodePen

[emattias]

Ok I removed all the commented out code and only kept the absolute minimum to reproduce the bug here: 

See the Pen jOdebPX by emattias (@emattias) on CodePen

 

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?

[emattias]

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): 

See the Pen MWLPJyd by emattias (@emattias) on CodePen

 

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?

[GreenSock]

Pinning inside containerAnimations is not supported. You're basically faking that in your demos there which is throwing off all the native calculations. For example, let's say you've got an element that's 500px from the left edge of the browser natively, and then you create a containerAnimation that moves it (along with various other siblings) 1000px to the left linearly. So when ScrollTrigger analyzes things, it says "that element is 500px from the left edge, and the containerAnimation moves it a total of 1000px, thus it'll hit the left edge 50% into the animation. 

 

But if inside your containerAnimation you're counter-moving that element in the opposite direction to simulate pinning 25% into the containerAnimation, that's of course going to throw everything off and depending how long you're counter-moving it, that'll delay when it hits the left edge. 

 

Is it possible to do all the math to figure it out in your particular scenario? Sure, but it's way beyond the scope of help we can provide in these free forums. That's a lot of custom logic you'd have to wire up. This is part of the reason why pinning isn't supported in containerAnimations - it's extremely complex to try to analyze every single possible tween inside the containerAnimation, calculate all the ratios, accommodate all that nesting, etc. I'm not even sure it'd be feasible in many situations. It'd require a ton of extra code in ScrollTrigger which imposes a kb (and performance) cost on everyone even though probably less than 0.001% of users would ever benefit. See what I mean? 

 

If you need more help on this, we do offer paid custom consulting services. You're welcome to reach out to us about that. But this isn't a simplistic thing, that's for sure. 

 

An alternative which would cost a fair amount CPU-wise would be to use an onUpdate on the ScrollTrigger inside which you could just keep checking to see if the element has reached the position you're aiming for and if so, then fire your onEnter or whatever. I'm just generally not a fan of that because it typically involves calling getBoundingClientRect() on every scroll event which isn't cheap. 

[emattias]

@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?

[Rodrigo]

6 hours ago, emattias said:

The animated boxes that use containerAnimation and scrolltrigger in @Tosos example above are also inside pinned containers.

Horizontal pinning is not supported when using vertical scrolling, you are scrolling in the Y axis but you want to pin on the X axis. ScrollTrigger simply can't manage that. The demo Toso links pins an element vertically, inside that element a bunch of panels are animating on the X axis but the scroll is still vertical (on the Y axis). In order to mimic horizontal pinning you have to pause that animation on the X axis, but that will throw off any calculation ScrollTrigger will make for the container animation feature. For that you have to handle everything yourself as show in the demos in this thread:

Hopefully this helps.

Happy Tweening!

[emattias]

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]

If you're asking whether or not you can place a function call into a timeline at a certain spot, absolutely. 

// logs "hit" when the playhead crosses the 2-second spot on the timeline
tl.add(() => console.log("hit"), 2);

And you could use a label as the position parameter if you like.

 

Does that answer your question? 

[emattias]

On 12/1/2023 at 11:28 PM, Rodrigo said:

Horizontal pinning is not supported when using vertical scrolling, you are scrolling in the Y axis but you want to pin on the X axis.

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?

[Rodrigo]

Hi,

 

Just like I said in my previous post, you add multiple animations in the Timeline that moves the panels on the X axis in order to mimic horizontal pinning while scrolling vertically and between those you add one or more tweens to animate things inside the panels. It uses the position parameter, is really simple actually. 

 

Here is a fork of one of those demos without ScrollTrigger:

See the Pen MWLRQWN by GreenSock (@GreenSock) on CodePen

 

Study and play with the code in order to see how is working, so you can better understand it.

 

Hopefully this helps.

Happy Tweening!