Jump to content
Search Community

Potential regression 3.8.0 => 3.9.1 when using .from() and ScrollTrigger?

ncla test
Moderator Tag

Recommended Posts

Today I decided to upgrade from older version 3.7.0 of GSAP. And I found out that about 1/3 of my animations stopped playing when they should.

I narrowed it down to versions 3.8.0 and 3.9.1 between where the issues happens and does not.

 

To reproduce:

1. Open the Codepen in /debug page (so as if it is just normal page without all the Codepen fluff)

2. (Kinda optional?) Position page scroll so that "scroller-start" marker is after "start" marker. Or in other words, scroll position should be where it would trigger the animation.

3. Refresh page

 

There is no animation happening at all upon page load. Even more confusingly, the event onEnter is firing with appropriate progress value.

 

If you downgrade the version for the JS files to 3.8.0 manually through Codepen, it works as intended.

 

I went through the changelog on Github but found nothing that would suggest regression or that I should have went through some upgrade guide of sorts.

 

Anyone knows what's up? Thanks.

See the Pen JjrmGKd by ncla (@ncla) on CodePen

Link to comment
Share on other sites

Sorry about that, @ncla! I see exactly what you mean and it should be fixed in the next release which you can preview (compressed) at https://assets.codepen.io/16327/gsap-latest-beta.min.js

 

It was related to the "lazy" functionality that defers and groups rendering of .from() values to maximize performance.

 

You can fix it in the current version by simply setting lazy: false on your .from() tween(s). 

 

Thanks for reporting this!

  • Like 3
Link to comment
Share on other sites

Apologies for the late reply, some other things came up.

 

As far as I can tell, setting lazy: false does not remedy the issue. I updated the Codepen, maybe you are able to reproduce it as well.

 

However using the latest beta file does fix the issue. Thanks! When can I and other people expect a new version release?

 

Also I unfortunately have another another bug regarding "once" functionality, but I will open another thread separately. 

Link to comment
Share on other sites

6 hours ago, ncla said:

As far as I can tell, setting lazy: false does not remedy the issue. I updated the Codepen, maybe you are able to reproduce it as well.

 

Your demo has lazy: true instead of lazy: false :)

 

Once I changed that, it seems to work great for me. Am I missing something? 

 

As for when the next version will be released, we don't have a specific date yet. It's likely in the next 4-6 weeks. 

  • Like 2
Link to comment
Share on other sites

  • 1 month later...

So sorry about the delay, @JakeWhiteleyDev. Trust me, we've been working super hard on some very exciting things; we originally hoped to push out the release much more quickly but then ran into several iOS Safari browser bugs that we had to find a way around and it took way longer than anticipated. Ugh! 

 

But I promise, we're highly motivated to push the release out as soon as possible. Prepping docs, demos, blog post, etc. - I think you're gonna love what we're about to deliver and I hope you'll find that it was well worth the wait :)

 

Thanks for your patience! And in the meantime, the lazy: false thing fixes it in the current version so it should be relatively easy to get by for now. 

  • Like 1
Link to comment
Share on other sites

  • 1 year later...

Has this been fixed yet? I've just migrated from 3.8.0 to latest, and all of my .from tweens have stopped working properly, also when adding the 'lazy: false' attribute, it doesn't seem to work properly. Are there any other major changes I should've watched out from?

Link to comment
Share on other sites

Hi @Cassie,

 

My tween looks like this as an example:

gsap.from("#block-12-9657559 .line .heading-6", 1.5, {
	scrollTrigger: {
		id: "gsap-title-footer",
		trigger: "#block-12-9657559 .box-1",
		scroller: "[data-scroll-container]",
		scrub: false,
		start: "top 85%",
		markers: true,
	},
	y: 200,
	ease: "power4.out",
	skewY: 10,
	stagger: {
		amount: 0.25
	},
});

Running on the following versions:

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.4/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.4/ScrollTrigger.min.js"></script>

 

It works perfectly when running on 3.8.0, as soon as I switch the script tags the animation doesn't play

Link to comment
Share on other sites

Hi @Olav. I'm super curious to see a minimal demo. This definitely shouldn't be a problem anymore. Are you using React? If so, I bet you're getting bitten by React 18's double-invoking of useEffect()/useLayoutEffect() but it's easy to resolve by doing proper cleanup. gsap.context() makes that super easy. 

 

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

 

Once we see a minimal demo that clearly illustrates the problem, I'm confident we'll be able to offer a solid answer. 

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...