Jump to content
Search Community

Using GSAP 2.x paid plugins with React

UrbanYoda test
Moderator Tag

Recommended Posts

Hi all! I have some older plugins (namely drawSVG) that I purchased a few years ago which I'd like to incorporate into my Create-React-App project. I'm currently using the NPM GSAP library to have access to TimelineMax and TweenMax, and I added the drawSVG plugin in a script tag in my base index.html. Regular tweens are working great but I can't seem to get drawSVG to animate my SVGs when using the {drawSVG: ___ } object in my tween. Any advice that can help is more than welcome. Thanks in advance!

Link to comment
Share on other sites

Hey UrbanYoda and welcome to the GreenSock forums!

 

I'm guessing you're trying to use GSAP 2 plugins with GSAP 3?

 

The GSAP 2 plugins are not built to work with GSAP 3. There are new versions of the files for version 3. To get access those files and other updates, sign up for Club GreenSock again! We’re pretty confident you’ll find that the license pays for itself very quickly when you consider the time it saves you, the added capabilities, performance, reliability, etc. Typically our customers find that it pays for itself literally in a matter of days (or weeks at the most). I'm sure you experienced that last time you had a membership.

 

But if you’re not happy we’ll gladly issue a full refund. We’re passionate about having happy customers around here.

Link to comment
Share on other sites

Oh, I had no idea that was the case with the Club GreenSock membership! Now I know...I'll have to upgrade soon. No need to convince me...I've been a huge GSAP fan for years.

However,  aside from that, I'm actually using v2.1.3 of NPM GSAP, so everything is version 2.x. Does that add enough information to clarify my question?

  • Like 1
Link to comment
Share on other sites

5 minutes ago, UrbanYoda said:

I'll have to upgrade soon. No need to convince me...I've been a huge GSAP fan for years.

We're so glad to hear it!

 

2 minutes ago, UrbanYoda said:

However,  aside from that, I'm actually using v2.1.3 of NPM GSAP, so everything is version 2.x.

Hmm. Your club plugins should work in that case. 

 

What sort of error is it giving you? 

Link to comment
Share on other sites

Hey @UrbanYoda. I was mistaken before in regards to you needing to upgrade to continue using club plugins. You're free to continue using the files that you have without issue. But we highly recommend GSAP 3! It comes with a sleeker API, all new features (including a new MotionPathPlugin) and a smaller file size. 

 

We're also happy to help with your errors with the old version if you post more information.

Link to comment
Share on other sites

@UrbanYoda

 

I'm wondering if it trying to run the animation code before it's looking for the DrawSVG.js.

 

Instead of adding drawSVG in your index.html - try using: require('../path/to/file/DrawSVG.js'); where you're using the drawSVG code (inside your lifecycle or hook).


That or use the cdn for gsap and make sure it, and your DrawSVG.js are being called before your animation code.

 

Is the console putting out any errors?

  • Like 1
  • Thanks 1
Link to comment
Share on other sites

It really shouldn't matter if you are including the plugin in a script tag. You can double check to make sure it's loaded by logging this out before you use it.

 

console.log(window.com.greensock.plugins);

 

If it's loaded and you still can't get it to work, perhaps you are using the plugin incorrectly. Make sure you are targeting an svg element that has a stroke on it.

 

 

  • Like 4
Link to comment
Share on other sites

So, I was able to get this working after @OSUblake's suggestion to console.log out the plugins. Turns out placing the script in the HTML wasn't loading (React was resolving the wrong path even though the script and HTML live in the same directory...still haven't figured out why), so I expanded on @elegantseagulls' idea and created a custom hook called useScript to dynamically load the script in my component: 

 

useScript.js:

import { useEffect } from 'react';

const useScript = url => {
  useEffect(() => {
    const script = document.createElement('script');
    script.src = url;
    script.async = true;

    document.body.appendChild(script);

    return () => {
      document.body.removeChild(script);
    }
  }, [url]);
};

export default useScript;

Using hook in component: 

import useScript from './hooks/useScript'

const TestComponent = () => {
	
  // plugin lives in /public folder
  useScript('/DrawSVGPlugin.min.js')
  
  ...
  
}
  
export default TestComponent
  

Now the script is loading and all is almost good. I'm having a pesky bug where the SVG animation doesn't work on the first render, but after clicking back then forward in the browser, it works perfectly. I'm pretty sure this is a state management issue on my end, so I'm going to restructure and test later. Will keep you posted on my results. Again, a sincere thanks to everyone for their input 😀.

Link to comment
Share on other sites

UPDATE: It turns out React was rendering before the plugin was fully loaded. My basic useScript custom hook needed to be fleshed out a bit more, so I swapped it out for the useScript hook from https://usehooks.com/useScript/, which contains loading and error variables. With this, I was able to run the animation once I was sure the script was in memory. With those changes, everything is now working properly. Here's my updated code:

import useScript from './hooks/useScript'

//component containing SVG
import TestComponent from 'components/TestComponent' 

const App = () => {
	
  // plugin lives in /public folder
  const [loaded, error] = useScript('/DrawSVGPlugin.min.js')
  
  return (
    <div>
    { loaded && <TestComponent/> }
    </div>
  )
}
  
export default TestComponent

 

Link to comment
Share on other sites

4 minutes ago, ZachSaucier said:

Why not just import the script? Creating a hook to load a <script> seems like a bit much.

React is a fussy beast. Importing without being able to confirm the script being loaded just wasn't working for me. 

Link to comment
Share on other sites

I agree with @ZachSaucier loading a <script> via hook isn't the best approach.

 

@UrbanYoda

 

Instead of in your index.html, try loading your DrawSVG script in your _document.js file.

Otherwise, here's how I'd set it up (gsap3 is waaaay nicer than 2 for react imports, etc, so def look into that):

Note: I've not used require() with hooks, so this is a tad untested, but it worked well with ComponentDidMount, so concept is similar...

 

import React, { useCallback, useRef, useEffect } from 'react';
import styled from 'styled-components';
import { TimelineMax } from 'gsap';

const SVGComponent = styled.svg`
  visibility: hidden;
  width: 100%;
`;

const SVGDrawing = () => {

  const TL = useRef();

  const SVGRef = useCallback((el) => {
    if (!el) return;
	
    const Path = el.querySelector('path');

    require(../path/to/file/DrawSVGPlugin.min.js);
    
    TL.current = new TimelineMax({ delay: 1 });
    TL.current
      .from(el, .2, { autoAlpha: 0, y: 20 })
      .from(Path, 1, { drawSVG: 0 });
  }, []);


  useEffect(() => () => {
    if (TL.current) {
      TL.current.kill();
    }
  }, []);

  return (
    <SVGComponent ref={SVGRef}>
   	  <path ... />
    </SVGComponent>  
  );
};

export default SVGDrawing;

 



 

  • Like 2
Link to comment
Share on other sites

6 hours ago, UrbanYoda said:

React is a fussy beast. Importing without being able to confirm the script being loaded just wasn't working for me. 

 

React has nothing to do with importing. Most likely something to do with your build tool config, like webpack. Or you were loading your app bundle before the plugin, so the react code was executing first.

 

13 minutes ago, elegantseagulls said:

Note: I've not used require() with hooks, so this is a tad untested, but it worked well with ComponentDidMount, so concept is similar...

 

Def not a fan of mixing modules like that, using the import and require syntax. That could result in importing 2 different types of modules. Did you try just importing the plugin? You can put that file inside gsap's node_modules folder.

 

import DrawSVGPlugin from "gsap/DrawSVGPlugin";

const plugins = [DrawSVGPlugin];

 

  • Like 3
Link to comment
Share on other sites

18 minutes ago, OSUblake said:

Def not a fan of mixing modules like that, using the import and require syntax.


Totally agree! However, I've had issues with using import in React (with next.js) with the SplitTextPlugin plugin (not sure about DrawSVG) using GSAP v2. Using require() fixed the issue. Setting the const plugins = [DrawSVGPlugin];may be what I was missing, though.

All this said, I've had amazing luck using import with GSAP3 and its plugins.

 

So the best answer, I'd say, is make the switch to GSAP3.

  • Like 2
Link to comment
Share on other sites

4 minutes ago, elegantseagulls said:

I've had issues with using import in React (with next.js)

 

That's because a lot of frameworks like that don't support es-modules out of the box, so you might have been importing 2 different types of modules.

 

Frameworks like that are stuck in the early in the 2010s, but to be fair, this is partly because they do server side rendering (SSR), and es-modules aren't supported in older versions of node.

 

next.js, nuxt.js... same difference.

 

 

 

 

11 minutes ago, elegantseagulls said:

Setting the const plugins = [DrawSVGPlugin];may be what I was missing, though.

 

Probably not. That line of code really only matters when you do a production build, so the minifier doesn't drop it (tree shaking).

  • Like 2
Link to comment
Share on other sites

1 minute ago, OSUblake said:

Strange. I thought I added a little line about using the dist folder for SSR on the installation page, but I don't see it anymore. 🤷‍♂️

You mean other than what's under the "UMD / CommonJS" section? 

 

It's possible that it was accidentally overwritten in one of our updates. There's some caching issue that we can't figure out and requires us to hard refresh to not overwrite changes. If we weren't aware of your update it's possible that we didn't think we needed to hard refresh before editing.

 

Happy to add it back in :) 

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