ScrollTrigger: Animation behavior during startup

[acg]

I'm hoping someone has some experience related to making animations play smoothly on "startup".

 

I have a web app using ScrollTrigger and the animations that are triggered when I scroll the page work perfectly. However, the animations that exist on the page initially often appear "completed" or I only see the final few frames of the animation.

 

I tried to show this behavior with the associated CodePen. Run the CodePen several times and pay attention to the moment you first see the blue rectangle. It is supposed to animate from the left side of the browser to the right. But generally, I only see "half the animation". The first instant that I visually see the blue rectangle it is already halfway through the animation. Now, I have occasionally seen it behave where the blue rectangle first appears on the very left side of the browser and then animates to the right as expected. But, it doesn't happen very often.

 

I know there is a lot of stuff going on underneath the hood (requestAnimationFrame, etc.). But I am hoping there is some technique or strategy that will allow the GSAP animations to play as smoothly on startup as they play elsewhere.

See the Pen zYBvarP by acgresearch (@acgresearch) on CodePen

[ZachSaucier]

Hey acg. Since your animation is going to play right at the beginning, most likely this jump is because the JS has been initiated which starts your animation timing but things are still loading/processing so it doesn't make time to update the visual state of the animation until later.

 

You could wait to initialize the animation a bit if you'd like to do that.

[acg]

Hey Zach. Thanks for the response.

 

I actually tried waiting. And by waiting I mean that in the document "onready", I waited for 3 seconds (using "setTimeout") which then does all the animation setup. It doesn't seem to have made much difference in my real world code. I updated the CodePen to include a delay and also some additional tweaks that make it a little closer to my real world code. Elements start as "hidden" and then I use the "onStart" callback to make the element visible when the animation starts. If you look carefully at the CodePen, you just never see the rectangle at the "0" position.

 

In my real world example, I'm actually doing lots of other effects like "growing, shrinking, fading, etc." I also may have 20 animations on the page at the start. I'm just finding that any animation that is there at the start simply doesn't look as smooth because those initial frames appear to be skipped.

 

Maybe this has more to do with the GSAP animation itself rather than ScrollTigger. The real world app has way too much code to share here. I was hoping that the CodePen adequately shows off a problem that you and others would recognize and have a best known solution.

[mikel]

Hey @acg,

 

If you want to animate the blue box with ScrollTrigger, please note that in your case the trigger ".mybox"

is already above the scroller start position and so the animation is executed immediately.

 

Here is a reworked example.

 

See the Pen zYBvgyZ?editors=1010 by mikeK (@mikeK) on CodePen

 

Happy scrolling ...

Mikel

 

[acg]

Hey @mikel,

 

Thanks for your post. Yes, I recognize that ".mybox" was above the start trigger and would execute immediately. That was actually kind of the point and helped show off the problem. If you do something like I  had done, the animate *should* happen immediately, but what you see on screen isn't "perfect". In a perfect world, you would see the blue box appear at x=0 and then animate to x=1600 over 0.4 seconds. But instead, the first appearance of the blue box is not at x=0 but rather at some larger "x" value that varies (generally it looks to be between roughly x=100 and x=400 or so). In other words the very first time you actually *see* the blue box, it is already part way through the animation. And what I want is to make sure a user sees *ALL* of the animation from the very first frame to the  last.

 

The problem seems to get worse the more gsap animation you include. I've got a page that has 20+ animations and when they all try to start simultaneously, I generally don't see the very beginning of the animations. Rather, the animations shows the final, maybe, 50% of the animation. If I change the 20 animations by inserting say a half second of "pause", then the user DOES see the complete animation. Presumably this is because the gsap engine is "jumping past the first half second pause" and then showing the animation. This  isn't a great solution because I have no idea if a half second would work across all browsers/devices. A delay value of a half second worked for me on my system to allow the entire animation be consistently shown from x=0 to x=1600.

 

And since I'm re-using the animation, this creates a bit of a problem because I don't want that pause there on future invocations of the animation. So, I would have to resort to something where I use a "startup phase" animation that includes an extra half second pause, and then replace that animation with one with no pause whenever the animation gets triggered in the future. That is just kind of messy and I was hoping there was some other universal "wait until everything is settled down" kind of event to know when I could tell all the animations to "go" and they would show their entire animation.

 

Does that make sense? I'm concerned I haven't clearly communicated the problem.

[mikel]

Hey @acg,

 

I also have trouble seeing the starting point of the box.
But my handicap is that in my old age the eyes and the speed of perception are no longer so good for a 0.4 sec animation.

Therefore, for me, this is a slow-motion version where I can see that the animation is shown from start to finish.

 

See the Pen JjKGOYz?editors=1010 by mikeK (@mikeK) on CodePen

 

Happy scrolling ...

Mikel

 

[ZachSaucier]

It'd be helpful if you could modify your demo to better represent your real world situation. I don't believe that GSAP would just be skipping the first few frames but it's possible that you're asking too much of the browser for that time.