Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Drymy

A few questions about ScrollTrigger with Timelines in REACT

Go to solution Solved by OSUblake,

Recommended Posts

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!

Link to comment
Share on other sites

  • Solution

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()
  }, []);

 

 

  • Like 3
Link to comment
Share on other sites

Thank you, that was very insightful!

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