A few questions about ScrollTrigger with Timelines in REACT

[Drymy]

Hello all!

First off, here is the codesandbox for my testing : https://codesandbox.io/s/confident-tree-crcmt?file=/src/App.js

 

I'm new to all this so i have a few questions if that's ok...

First off, i'm trying to use both the timeline and scrolltrigger together and sadly i couldn't make it work.

If i change the start value to "top center" and the timeline is already triggered on refresh, the animation plays perfectly,

however well if i refresh the page and i'm outside of my trigger then get to it well...the animation just "pops in" and doesn't play out at all.

I tried various things but couldn't make it work as intended : have the animation play once the scroll reaches the trigger.

 

Second, i'm having a lot of trouble understanding how to set an element as the end point/destination.

For exemple, if i want my animation in the codesandbox to land exactly at the edge of the gray div, right on top of the orange div, how could i determine that through the x & y coordinates without it being destroyed by viewport and responsive? I guess it's more practical vertically, but horizontally the x coordinates always become obsolete the moment the window is resized, and i don't know how to deal with that...

 

And finally sorry, in my exemple you can see i'm using a rotation and bounce ease, however when the bounce happens the rotation goes backwards and it's jarring. I understand why it does that, but is there a way to keep the rotation linear instead of it rotating backwards on the bounce?

 

Apologies for the long post, i hope it's not too much of an issue, have a good day!

[OSUblake]

Hi Drymy!

 

Have you looked at our React Guide?

 

One thing you should never do is create a timeline outside of a hook, especially with ScrollTrigger as the element won't be defined.

 

Second, never put ScrollTrigger in the defaults object as that will make a ScrollTrigger for every child animation. See the most common ScrollTrigger mistakes, especially the one about nesting.

 

 

Third, I wouldn't use ID's for elements. Check out the selector utility in that React Guide.

 

If you're using ScrollTrigger, add invalidateOnRefresh: true to it, and use functions to calculate the values.

 

Quote

invalidateOnRefresh

Boolean - If true, the animation associated with the ScrollTrigger will have its invalidate() method called whenever a refresh() occurs (typically on resize). This flushes out any internally-recorded starting values.

 

 

 

This should help you get started.

 

useLayoutEffect(() => {
    let tl = gsap.timeline({
        scrollTrigger: {
          trigger: ".start",
          start: "top top",
          end: "+=500",
          markers: true,
          invalidateOnRefresh: true
        }
    });
    tl.to("#fallingMoog", {
      opacity: 1,
      x: 30,
      y: () => 395, // calculate your value
      rotation: "+=720",
      duration: 2,
      ease: "bounce.out"
    });
    tl.to("#bubble1", {
      opacity: 1,
      x: -60,
      duration: 0.5
    });

    return () => tl.scrollTrigger.kill()
  }, []);

 

 

[Drymy]

Thank you, that was very insightful!