Jump to content
GreenSock

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

Importing TweenMax into React component

Recommended Posts

I have a GSAP animation working in a React component on codepen (thank you @rodrigo). Now I am trying to use it in my React project, but I get an error message saying, "'../../index' does not contain an export named 'TweenMax'."  

I'm guessing my strategy of placing the cdn links for TweenMax and MorphSVGPlugin in the public/index.html was not the correct way to add GSAP to the project.

Do I have to download the source code and place it in the project or can I still use the CDN - and if so, where do I place the link?

Thanks for any suggestions.

Paul 

See the Pen RMgxZd by pcdavis (@pcdavis) on CodePen

Link to comment
Share on other sites

Hi Paul,

 

I don't know how you're bundling your code, so I'll assume babel and webpack or perhaps create react app. If you're using the HTML plugin for wepack, then webpack is placing the scripts tags in your index file for you, above the </body> closing tag, so you could add the CDN links between the <div> where the app is being placed and the closing body tag.

 

<html>
  <head></head>
  <body>
    
    <!-- HERE REACT RENDERS THE APP -->
    <div id="app"></div>
    
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.4/TweenMax.min.js"></script>
    <script src="js/gsap/plugins/MorphSVGPlugin.min.js"></script>
    
    <!-- WEBPACK ADD THE SCRIPTS HERE -->
    
  </body>
</html>

 

If you're not using the HTML plugin then just add them manually before the tag where you're putting the bundled code:

 

<html>
  <head></head>
  <body>
    
    <!-- HERE REACT RENDERS THE APP -->
    <div id="app"></div>
    
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.4/TweenMax.min.js"></script>
    <script src="js/gsap/plugins/MorphSVGPlugin.min.js"></script>
    <script src="js/app.js"></script>
    
  </body>
</html>

 

If you're using create react app, unfortunately I'm not at all familiar with it, I prefer to create my own startup code, but perhaps you can use this links:

 

https://github.com/facebook/create-react-app/issues/3007

 

https://github.com/facebook/create-react-app/blob/master/packages/react-scripts/template/README.md#using-the-public-folder

 

Finally if you could provide more info about it, it'd be very helpful, such as what set up you're using and that particular part of your index.html file.

 

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