Jump to content
Search Community

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

Akarisuu test
Moderator Tag

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

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...