Container animation initialized only after scrolltrigger enters

[thehaes]

Hey guys,

 

I have a simple horizontal container animation - basically each image have scrub scale & opacity animation with start: "left right", but the problem is it's bugged until you scroll to the start position of the scroll trigger, then it jumps to correct positions and works fine even if you scroll before/past it. There some issue with initial view when page loads, I tried immediateRender and some other solutions I found, but I can't get it to work.

 

Also, I was thinking how could I add a small delay at the start and end of horizontal section, so the first/last image has some time to be seen before it scrolls past/before that section. I tried to change it to timeline and add empty tweens before/after, but it messes with the animation itself making it out of sync. Any other way of doing that?

See the Pen poKMvgJ by thehaes (@thehaes) on CodePen

[Rodrigo]

Hi,

 

This stems from the fact that you have two consecutive from and fromTo instances affecting the same targets but not the scale.

 

This is what happens when your code is initialize:

• First tween: Images are set to scale 0.7 and opacity 0.2
• Second tween: Images are set to opacity: 1 (scale doesn't change)

See the issue? Unfortunately this is one of the few cases where immediate render false doesn't help, same thing if you set the scale to one in the fromTo instance.

 

The best solution I can think of is to force the container animation to complete, hence rendering all the styles and then setting it back to the start. Here you can see it in this fork of your codepen:

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

 

Hopefully this clarifies the issue. Let us know if you have more questions.

 

Happy Tweening!

[thehaes]

Thanks @Rodrigo for not only solving my problem, but also explaining the issue here, makes it much more clear and hopefully will avoid similar problems in the future as now I know how it works in this case.

 

Also, do you know what would be the best approach to add that pause at start & end? If you scroll a bit faster than usual you will know what I mean. The other way I could think of would be separating pinning and container animation and setting the container animation with some offset so it starts/ends later

Quote

Also, I was thinking how could I add a small delay at the start and end of horizontal section, so the first/last image has some time to be seen before it scrolls past/before that section. I tried to change it to timeline and add empty tweens before/after, but it messes with the animation itself making it out of sync. Any other way of doing that?

--EDIT--

Actually, there's still some issue with scale/opacity on the second item when you scroll to the start position. Not sure why the first one doesn't "jump", but the second one does.

Edited December 14, 2022 by thehaes

[Rodrigo]

16 minutes ago, thehaes said:

do you know what would be the best approach to add that pause at start & end?

Mhhh... that's a tricky one actually. The first thought would be to convert the horizontal animation to a timeline and add a delay to the container animation (the one that moves the entire element to the left) and some dead time at the end of the timeline. But that is not going to work since the images are tied to the progress of the container animation, so adding those spaces would cause some odd behaviour.

 

The only thing I can think of is creating two ScrollTriggers. One that pins the container and another that moves the container. The one that pins the container should end after the one that moves the container and the one that moves the container should start after the one that pins it. I know it sounds complicated, but here is a live example that shows how simple the logic actually is:

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

 

Happy Tweening!

[Rodrigo]

37 minutes ago, thehaes said:

Actually, there's still some issue with scale/opacity on the second item when you scroll to the start position. Not sure why the first one doesn't "jump", but the second one does.

That's because the time it takes JS and ScrollTrigger to get everything set up correctly. Maybe you can hide the container or add an overlay while that code runs. Once is complete by checking the refresh event by ScrollTrigger, you can hide it.

 

https://greensock.com/docs/v3/Plugins/ScrollTrigger/static.addEventListener()

 

Happy Tweening!

[thehaes]

Actually, just forcing the container animation to complete after checking the refresh event, did the trick!

ScrollTrigger.addEventListener("refresh", () => horizontal.progress(1).progress(0));

Thanks again, marking this as solved!