Scrolling before animations are done interferes with scrolltrigger

[gem]

I realize that the image starts very big - I apologize but please ignore this, it is not a bug on my actual site.

 

I have a timeline that animates the elements initially coming into frame. If the user navigates to the page and does not scroll, everything works perfectly. The issue comes if a user scrolls before the animation is done.

 

To replicate this issue:

- refresh page

- scroll down before timeline is done playing

- scroll back up

 

You will notice that many of the images are missing or not the right opacity. I am wondering if there is any way to avoid this happening. Thanks so much.

 

EDIT: realizing that the codepen is not working on this page. If you click edit on codepen it works no problem. Thanks

See the Pen LYXebbw by bonfiremitch (@bonfiremitch) on CodePen

[Rodrigo]

Hi,

 

The reason for this is that these elements are the same basically:

• originalImages
• shuffledImages

So when you create your GSAP instance with the ScrollTrigger config that has immediateRender: false, what happens is that GSAP will first render that instance when ScrollTrigger passes the start point. Since the targets are the same and the other animation has not yet finished, that instance is rendered with whatever state the images are currently, that's why you don't see them go from opacity 1 to 0.

 

In this case is better to use a fromTo() instance and perhaps set the progress of the timeline to 1:

gsap.fromTo(originalImages, {
  opacity: 1,
}, {
  opacity: 0,
  x: (i) => stOptions[i].x,
  y: (i) => stOptions[i].y,
  scrollTrigger: {
    trigger: ".landingHero",
    start: "top top",
    end: "100%",
    scrub: true,
    markers: true,
    immediateRender: false,
    onEnter: () => heroTl.progress(1),
  }
});

Hopefully this helps.

Happy Tweening!

[gem]

Just want to circle back to see if there are any additional solutions? Using a fromTo in this situation essentially overwrites the staggered fade in a few functions above. Thanks!

[Rodrigo]

Hi,

 

Did you tried the code I posted?

 

Here is a fork of your example with that change in it:

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

 

Happy Tweening!

[gem]

So I ended up having to throw the second animation in a setTimeout. This way the animation waits and does not skip the initial fade in.

 

I have a follow-up to this same animation. When scrolling the images almost feel like they are behind, and after the user is done scrolling it takes a second for the pictures to stop moving. I have the scrub set to true, and trying to change the ease effects has not changed anything. A better demo can be seen here, which really shows the images feeling like they are "catching up" to the scroll

 

Thank you!

[GreenSock]

That's because you've got a CSS transition applied to those elements which is a VERY bad idea You should never apply CSS transitions to elements that you're animating with GSAP because when GSAP applies a change, the CSS transition will interrupt that and say "NOPE! I won't allow that to happen yet...I'm gonna drag that change out over the course of my duration..." 

 

So just remove the CSS transitions and you should be fine.