Akarisuu Posted September 22, 2022 Share Posted September 22, 2022 Hello! On version 3.10, when you use .set() or .from() with the ScrollTrigger plugin applied as the first call, they behave like a method on gsap object without any plugins - they just get added as inline style immediately after loading the script. Today I updated my project to version 3.11 and to my surprise, most of the animations were behaving weirdly (easy to notice at fade in animations). After looking things up in DevTools i noticed that now in 3.11 .set() and .from() launches only after getting between the ScrollTrigger's values - start and end. Not sure if it's a bug or an intended thing, but if its a feature I can't find any mentions about this on GSAP's GitHub update page. Example for 3.10 (fadein working as intended) gsap.fromTo( fadeInRef.current?.children || [], { autoAlpha: 0, }, { scrollTrigger: { trigger: fadeInRef.current, start: 'bottom bottom', once: true, end: '+=0', }, stagger: 0.1, autoAlpha: 1, }, ); Example for 3.11 (it's a fix for code above) gsap.set(fadeInRef.current?.children || [], { autoAlpha: 0 }); gsap.to(fadeInRef.current?.children || [], { scrollTrigger: { trigger: fadeInRef.current, start: 'bottom bottom', once: true, end: '+=0', }, stagger: 0.1, autoAlpha: 1, }); Link to comment Share on other sites More sharing options...
Solution Cassie Posted September 22, 2022 Solution Share Posted September 22, 2022 Hey there! Sorry about this - I think this is the regression mentioned in this thread - Already patched and will be pushed very soon. Would you like access to the beta or are you happy rolling back and waiting for the point release? 2 Link to comment Share on other sites More sharing options...
Akarisuu Posted September 22, 2022 Author Share Posted September 22, 2022 Thank you for your quick response! I just wanted to report a bug, I handled it, for now, the way I showcased above. 1 Link to comment Share on other sites More sharing options...
Cassie Posted September 22, 2022 Share Posted September 22, 2022 We always appreciate a bug report! Thanks for helping us out! 💚 Link to comment Share on other sites More sharing options...
Cassie Posted September 22, 2022 Share Posted September 22, 2022 Ooh also, Just in case you missed it. You may want to check out gsap.context() - it's the recommended way to write GSAP code in React. I think you'll find it very useful.https://greensock.com/docs/v3/GSAP/gsap.context() 2 Link to comment Share on other sites More sharing options...
GreenSock Posted September 23, 2022 Share Posted September 23, 2022 Yes indeed, sorry about that. We'll be releasing 3.11.2 soon. Here's an early copy if you'd like to test (but don't link to this file because it's beta and changes frequently): https://assets.codepen.io/16327/gsap-latest-beta.min.js Can you confirm that it resolves the issue on your project? 1 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