isaoBushi Posted September 8, 2020 Share Posted September 8, 2020 Hi there, I'm trying to run this little animation with Gatbsy, while all the other animations work fine morphing is not working no problems in vanilla, it crashes with React, I have add a codesandbox, but seems I can't retrieve the Plugins from there codesandbox Link to comment Share on other sites More sharing options...
ZachSaucier Posted September 8, 2020 Share Posted September 8, 2020 Hey isao. You need to check if window is defined, or move it into componentDidMount or useEffect hook. import { gsap } from "gsap" import { MorphSVGPlugin } from "gsap/MorphSVGPlugin"; if (typeof window !== "undefined") { gsap.registerPlugin(MorphSVGPlugin); } 1 1 Link to comment Share on other sites More sharing options...
isaoBushi Posted September 8, 2020 Author Share Posted September 8, 2020 That did it, thanks heaps! For future reference, any idea on how can i run the Plugin in codesandbox or codepen ? Link to comment Share on other sites More sharing options...
ZachSaucier Posted September 8, 2020 Share Posted September 8, 2020 For club plugins you have to use the special version of the plugins. For example: https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/MorphSVGPlugin3.min.js More info here: 1 Link to comment Share on other sites More sharing options...
billyZduke Posted March 26, 2021 Share Posted March 26, 2021 (edited) This fix worked for MorphSVGPlugin, but now I'm getting a similar error for the gsap core: Cannot read property 'querySelectorAll' of undefined 624 | }, 625 | //takes any value and returns an array. If it's a string (and leaveStrings isn't true), it'll use document.querySelectorAll() and convert that to an array. It'll also accept iterables like jQuery objects. > 626 | toArray = function toArray(value, leaveStrings) { | ^ 627 | return _isString(value) && !leaveStrings && (_coreInitted || !_wake()) ? _slice.call(_doc.querySelectorAll(value), 0) : _isArray(value) ? _flatten(value, leaveStrings) : _isArrayLike(value) ? _slice.call(value, 0) : value ? [value] : []; 628 | }, 629 | shuffle = function shuffle(a) { EDIT: I think I got it, just made sure all gsap calls to element selectors are occurring within useEffect or inside (typeof window !== 'undefined') if blocks. Gatsby's SSR is still behaving super inconsistently, but that's their problem, not yours... Edited March 27, 2021 by billyZduke further details Link to comment Share on other sites More sharing options...
GreenSock Posted March 27, 2021 Share Posted March 27, 2021 4 hours ago, billyZduke said: EDIT: I think I got it, just made sure all gsap calls to element selectors are occurring within useEffect or inside (typeof window !== 'undefined') if blocks. Gatsby's SSR is still behaving super inconsistently, but that's their problem, not yours... Just making sure you got it solved, @billyZduke. Also please remember to gsap.registerPlugin(MorphSVGPlugin). Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now