Jump to content
Search Community

tl.to is not a function - React functional component animation

ericnguyen23 test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Hi Guys,

 

I'm trying to do a simple animation with a React project using functional component. I'm getting this error:

Quote

Uncaught TypeError: tl.to is not a function

 

My timeline and DOM elements are defined and running my timeline within useEffect( ) so not sure why I'm getting that error.

 

Any help is appreciated.

See the Pen GRKrexJ by ericnguyen23 (@ericnguyen23) on CodePen

Link to comment
Share on other sites

I don't know anything about React, but what you have wired up there is returning an array for the tl variable. A timeline is the first element in the array and then a function. This seems to fix it.

 

    tl[0].to(headingRedf, 1, {
      y: +30,
    }).to(headingRedf, 1, {
      y: 0,
    });

Again, I have no knowledge of React so others will probably jump in with a proper solution.

 

  • Like 2
Link to comment
Share on other sites

15 minutes ago, PointC said:

I don't know anything about React, but what you have wired up there is returning an array for the tl variable. A timeline is the first element in the array and then a function. This seems to fix it.

 


    tl[0].to(headingRedf, 1, {
      y: +30,
    }).to(headingRedf, 1, {
      y: 0,
    });

Again, I have no knowledge of React so others will probably jump in with a proper solution.

 

 

Thanks, that does render the content but animation doesn't run. I'll play around with it some more.

Link to comment
Share on other sites

If you check the console you'll see that headingRedf is not the <h1>, but rather an object. This will make it move.

 

    tl[0].to(headingRedf.current, 1, {
      y: +30,
    }).to(headingRedf.current, 1, {
      y: 0,
    });

You're also getting a console error about exports not being defined. That's all I can offer with my lack of React knowledge. Happy tweening.

:)

 

  • Like 4
Link to comment
Share on other sites

3 hours ago, PointC said:

If you check the console you'll see that headingRedf is not the <h1>, but rather an object. This will make it move.

 


    tl[0].to(headingRedf.current, 1, {
      y: +30,
    }).to(headingRedf.current, 1, {
      y: 0,
    });

You're also getting a console error about exports not being defined. That's all I can offer with my lack of React knowledge. Happy tweening.

:)

 

You may not know React, but you are pretty solid with JS! ?

 

Everything makes total sense now! 

 

  • Like 3
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...