Jump to content
GreenSock

Akarisuu

Different behavior of tl.set() and tl.from() between versions 3.10 and 3.11

Go to solution Solved by Cassie,

Recommended Posts

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

  • Solution

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?

  • Like 2
Link to comment
Share on other sites

Thank you for your quick response! I just wanted to report a bug, I handled it, for now, the way I showcased above.  :-D

  • Like 1
Link to comment
Share on other sites

We always appreciate a bug report! Thanks for helping us out! 💚

Link to comment
Share on other sites

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? 

  • Like 1
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.
×