ncla Posted January 10, 2022 Share Posted January 10, 2022 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 More sharing options...
Cassie Posted January 10, 2022 Share Posted January 10, 2022 Hey there! Your syntax should be gsap.from('h1', { x: -50 } I can't speak to a regression though as I wasn't aware you could use a string syntax for x values. Maybe @GreenSock has a better idea? Link to comment Share on other sites More sharing options...
Cassie Posted January 10, 2022 Share Posted January 10, 2022 Sorry about this though, it's frustrating to have animations stop working. Thanks for reaching out and letting us know. ☺️ Link to comment Share on other sites More sharing options...
ncla Posted January 10, 2022 Author Share Posted January 10, 2022 Thanks Cassie. I updated it to just number value, but issue seems to persist. Even more odd that for some rare refreshes it does trigger animation. Link to comment Share on other sites More sharing options...
GreenSock Posted January 11, 2022 Share Posted January 11, 2022 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! 3 Link to comment Share on other sites More sharing options...
ncla Posted January 18, 2022 Author Share Posted January 18, 2022 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 More sharing options...
GreenSock Posted January 18, 2022 Share Posted January 18, 2022 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. 2 Link to comment Share on other sites More sharing options...
ncla Posted January 19, 2022 Author Share Posted January 19, 2022 13 hours ago, GreenSock said: Your demo has lazy: true instead of lazy: false Argh, that's embarrassing. You are right, it is working! Thanks. Link to comment Share on other sites More sharing options...
JakeWhiteleyDev Posted March 7, 2022 Share Posted March 7, 2022 @GreenSock It's been almost 2 months since this thread was posted and the regression is still present in the latest NPM version. Bumping this thread so others can find the fix :) 2 Link to comment Share on other sites More sharing options...
GreenSock Posted March 8, 2022 Share Posted March 8, 2022 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. 1 Link to comment Share on other sites More sharing options...
Crftd Posted March 14, 2023 Share Posted March 14, 2023 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 More sharing options...
Cassie Posted March 14, 2023 Share Posted March 14, 2023 Oh no, This certainly shouldn't be an issue in the latest version - could you let me know which version you're on Olav? Link to comment Share on other sites More sharing options...
Crftd Posted March 14, 2023 Share Posted March 14, 2023 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 More sharing options...
GreenSock Posted March 14, 2023 Share Posted March 14, 2023 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 More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now