ScrollTrigger sometimes works, sometimes not

[Zoker]

Hi there,

 

I just tried to create a scroll trigger, which will change the opacity and position based on the scroll progress:

gsap.from('.a-f-r', {
    scrollTrigger: {
        trigger: ".a-f-r",
        start: "top bottom",
        end: "center bottom",
        scrub: 1
    },
    x: 1000,
    opacity: 0
});

Now the issue is, that this works sometimes and sometimes does not. When I reload the page the chances are 50/50 that it works.

When it does not work, the opacity just stays 0 and the element is hidden.

 

The page does not use any caching yet or any other optimization. The site can be found here: https://shorturl.at/bjmzO

The above code is located in the animation.js file

 

Is there any way I can make this reliable? 

 

Thanks!

[OSUblake]

Welcome to the forums @Zoker

 

Please provide a minimal demo that shows the issue. We can't answer a problem we can't see and we need to be able to experiment with the code.

[Zoker]

Hi @OSUblake,

 

Thanks for the warm welcome!

Sure I created a demo here, that seems to have the same issue:

See the Pen abLeqra by Zoker (@Zoker) on CodePen

 

Hope that helps!

[Cassie]

Hey @Zoker Looks like it's down to a regression in the latest version. Sorry about that!

Fixing options! 

• Step back the version to 3.8
• Use the latest beta 
• Fix it for the current version by setting lazy: false on your .from() tween(s). 

 

 

 

See the Pen NWaQYVY?editors=1010 by GreenSock (@GreenSock) on CodePen

 

(You'll also need to load your GSAP script before the scrollTrigger script in your codepen JS panel.)