Jump to content
Search Community

gsap.from is not a function

KingRetracted test
Moderator Tag

Go to solution Solved by GreenSock,

Recommended Posts

I am using React for my fun project and to start learning and using gsap. I have a div with the ref of ``box`` and ran the line GSAP.from(box, {x: "-100px", duration: 1}) and took inspiration from the React example on the website. However, it came up with the error TypeError: GSAP.from is not a function. (In 'GSAP.from(box, { x: "-100px", duration: 1 })', 'GSAP.from' is undefined and nothing I found has worked. 

    import GSAP from "gsap";

	const box = useRef();
    GSAP.from(box, { x: "-100px", duration: 1 });
    
    return (
            <div className="app" id="app">
                <h1>Hello World</h1>
                <div className="box" id="box" style={ {
                    margin: "0",
                    padding: "0",
                    width: "200px",
                    height: "200px",
                    backgroundColor: "#949cdf",
                } } ref={ box }></div>
            </div>
    );

 

Edited by KingRetracted
Markdown in plain-text doesn't work
Link to comment
Share on other sites

@GreenSock I typically just use all capitals for my libraries to seperate them from my variables. I'm using gsap 3.6.0 on a repl.it server. 

@ZachSaucier I'm on a repl.it and installed it via their package installer. However I also installed it with npm i gsapon the repl.it terminal which also proved unsuccessful.

4060BF19-A900-4FAD-ABE3-A1287F3E2BEE.png

Link to comment
Share on other sites

That sounds like you're trying to tween something that won't allow any dynamic properties to be added to it (extremely unusual in the world of JavaScript). Again, it's soooo hard for us to troubleshoot blind like this. 

 

What exactly are you trying to tween? My guess is that it's not what you think it is :) but I'm taking shots in the dark here. 

  • Like 1
Link to comment
Share on other sites

Once you provide a minimal demo, I'm sure we could offer more help. At this point, I'm just taking shots in the dark. I know you think you're passing in a <div> reference, but I'm pretty sure that's not actually what's happening. 

 

I'm not a React guy, but maybe the problem is that you're passing in the ref instead of the actual element, so try this: 

gsap.from(box.current, { x: "-100px", duration: 1 });

(notice the ".current")

  • Like 1
Link to comment
Share on other sites

  • Solution

Ah, it looks like this is just a logic issue in your code and the way React works - you're attempting to animate that box element before it even exists! Notice that you return (<> ...) the element declarations AFTER you  create the GSAP.from() animation. So box.current is undefined at that point. See for yourself with a console.log(box.current) right above the GSAP.from(...). 

 

Like I said, I'm not a React guy at all, so I'm sure someone else could advise you better about how you should be structuring your code there, but if you just tuck the GSAP call into a delayedCall() so that it runs AFTER your element declarations run, it works: 

GSAP.delayedCall(0.001, () => {
  GSAP.from(box.current, {width: "400px", duration: 1});
});

I imagine there are React lifecycle events/hooks you could tap into so that you create the animation at the right time (after the things you're trying to animate actually exist). See what I mean? 

  • Like 1
Link to comment
Share on other sites

Hi,

 

Jack is right, you should use the useEffect hook with an empty dependencies array, in order to create your gsap instance after the component is mounted:

import React, { useEffect, useRef } from "react";

function App() {
  const box = useRef();
  useEffect(() => {
    GSAP.from(box.current, {width: "400px", duration: 1});
  }, []);
  
  return (
    <>
      <div className="app" id="app">
      	<TaskBar></TaskBar>
        <div className="box" id="box" ref={ box } style={{
            margin: "0",
            padding: "0",
            width: "200px",
            height: "200px",
            backgroundColor: "blue",
        }}></div>
      </div>
    </>
  );
}

Happy Tweening!!!

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