Jump to content
Search Community

Importing TweenMax into React component

pcdavis test

By pcdavis
in GSAP

Moderator Tag
 Share

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

pcdavis test

pcdavis

Posted
Posted

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
Rodrigo test

Rodrigo

Posted
Posted

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
 Share
Go to topic listing

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...