Akarisuu
Content Type
Profiles
Forums
Store
Blog
Product
Showcase
FAQ
Downloads
Posts posted by Akarisuu
-
-
Hello!
On version 3.10, when you use.set()
or.from()
with theScrollTrigger
plugin applied as the first call, they behave like a method ongsap
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
andend
. 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, });
Different behavior of tl.set() and tl.from() between versions 3.10 and 3.11
in GSAP
Posted
Thank you for your quick response! I just wanted to report a bug, I handled it, for now, the way I showcased above.