Jump to content
GreenSock

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

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

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

Share this post


Link to post
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

Share this post


Link to post
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.

Share this post


Link to post
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

Share this post


Link to post
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

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.

×