Gsap CDN in React

balazs-d · December 2, 2020

Hi Everyone,

my question is definitely very basic and there are already a lot of topics open but still can't solve my problem.

I just want to use the Gsap CDN in React.

1. In the Public folder the index.htmml i added the following script tag into the header or into the body:

 <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.2.4/gsap.min.js" defer></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/TimelineMax.min.js"></script>

2. In a component I am trying to declare the TimelineMax. I dont import anything from Gsap like when i use NPM.

  const tl = new TimelineMax();

Here is already an error showing up:

src/CrossAnim.js
Line 60:18: 'TimelineMax' is not defined no-undef

Do you have any hint please?

ZachSaucier · December 2, 2020

Hey balazs-d. There is no such thing as version 3.5.1 of TimelineMax. All GSAP things related to Lite or Max were deprecated in GSAP v3. See the migration notes for more detail:

Additionally you only need to load one file for GSAP (unless you need additional plugins): https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/gsap.min.js. Make sure to load GSAP before you load your React bundle.

Here's a basic setup (@Rodrigo can correct me if I'm going wrong somewhere): https://codesandbox.io/s/immutable-cherry-0mnvp?file=/public/index.html

balazs-d · December 2, 2020

Hi Zach,

thanks for your fast response! I already found your CodesandBox example earlier and tried to use my setup that way. If i setup this way i get the the following error:

Line 58:14: 'gsap' is not defined no-undef

I did use CDN for other libraries before and I thought to know how to do. This situation is a kind of weird to me, and I was sure to use it correctly.

ZachSaucier · December 2, 2020

3 minutes ago, balazs-d said:

I already found your CodesandBox example earlier

I literally just made it, so that can't be true.

3 minutes ago, balazs-d said:

If i setup this way i get the the following error:

Line 58:14: 'gsap' is not defined no-undef

As my demo shows, this error does not happen if you set things up the way that I did. So something in your setup is wrong. Please make a minimal demo of your issue if you'd like help.

balazs-d · December 2, 2020

Ok, then it was another one probably.

I create a demo now...

balazs-d · December 2, 2020

I am not sure a Codepen demo will help. I am just setting up the project and there is no content now.

This is how my setup looks now:

- index.html

<!DOCTYPE html>
<html lang="en">
  <head>
  
    <meta charset="utf-8" />
    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <meta
      name="description"
      content="Web site created using create-react-app"
    />
    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
    <title>React App</title>

  </head>
  <body>
      
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/gsap.min.js"></script

  </body>
</html>

- my App.js

import "./App.css";
import CrossAnim from "./CrossAnim";
import styled from "styled-components";
import Container from "./Context/Container";


const Main = styled.div`
  display: grid;
  place-items: center;
  width: 100vw;
  height: 100vh;
  position: relative;
`;

const App = () => {
  
    const tl = gsap.timeline();

  return (
    <Container>
      <Main className="App">
        <CrossAnim />
        <div
          style={{
            display: "flex",
            flexDirection: "row",
            position: "relative",
            zIndex: 1000,
          }}
        >
          <button style={{ margin: 20 }}>1</button>
          <button style={{ margin: 20 }}>2</button>
          <button style={{ margin: 20 }}>3</button>
          <button style={{ margin: 20 }}>4</button>
        </div>
      </Main>
    </Container>
  );
}

export default App;

balazs-d · December 2, 2020

I did the demo and didnt get the same result.

https://codesandbox.io/s/lingering-frog-4w39p?file=/src/App.js

Rodrigo · December 2, 2020

Hi,

The main issue here is, while codesandbox can let go the gsap reference here:

class Circle extends Component {
  constructor(props) {
    super(props);

    this.circle = null;
    this.tl = gsap.timeline(); // this gsap reference
  }

  componentDidMount() {
    this.tl.to(this.circle, { x: 250, duration: 5, repeat: -1 });
  }

  render() {
    return <div ref={(div) => (this.circle = div)} className="ball"></div>;
  }
}

Keep in mind that is never defined anywhere in the file, so other setups with more strict linting could crash. When you use the CDN links the gsap constructor is added to the global scope, in this case the window object. This can be solved by simply creating a constant in order to actually have a definition for such reference:

const gsap = window.gsap;

class Circle extends Component {
  constructor(props) {
    super(props);

    this.circle = null;
    this.tl = gsap.timeline();
  }

  componentDidMount() {
    this.tl.to(this.circle, { x: 250, duration: 5, repeat: -1 });
  }

  render() {
    return <div ref={(div) => (this.circle = div)} className="ball"></div>;
  }
}

With that the issue should be solved.

Happy Tweening!!!

balazs-d · December 2, 2020

Hi Rodrigo,

I added now this line and its working as expected.

const gsap = window.gsap;

Thank you!

Notifications

Messages

Gsap CDN in React

Recommended Posts

balazs-d

Link to comment

Share on other sites

ZachSaucier

Link to comment

Share on other sites

balazs-d

Link to comment

Share on other sites

ZachSaucier

Link to comment

Share on other sites

balazs-d

Link to comment

Share on other sites

balazs-d

Link to comment

Share on other sites

balazs-d

Link to comment

Share on other sites

Rodrigo

Link to comment

Share on other sites

balazs-d

Link to comment

Share on other sites

Create an account or sign in to comment

Create an account

Sign in

Recently Browsing 0 members