Jump to content
GreenSock

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

MorphSVG React

Recommended Posts

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

 

Screen Shot 2020-09-08 at 7.47.05 pm.png

Link to comment
Share on other sites

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); 
}

 

 

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

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

  • 6 months later...

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 by billyZduke
further details
Link to comment
Share on other sites

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

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