UrbanYoda

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

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

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

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?

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!