[Errors when trying to use Draggable plugin with Next.js / React]

In typical fashion, after posting I've now resolved this issue with some more searching.

 

I had tried removing the following registerPlugin line altogether:

gsap.registerPlugin(Draggable);

 

But that gave another error:

TypeError: _toArray is not a function

 

So I knew this was needed.

 

It turns out that adding a condition to check for the window object around this line solves the issue.

 

The following now works fine:

import { gsap } from 'gsap';
import { Draggable } from 'gsap/dist/Draggable';
if (typeof window !== 'undefined') {
  gsap.registerPlugin(Draggable);
}

[Errors when trying to use Draggable plugin with Next.js / React]

I am trying to use GSAP Draggable in a Next.js project (i.e. React). Unfortunately I am encountering some errors.

 

I have followed the steps on the installation page, installing gsap using

npm install gsap

 

In my component, I then began with:

import { gsap } from 'gsap';
import { Draggable } from 'gsap/Draggable';
gsap.registerPlugin(Draggable);

But this gave the error:

"SyntaxError: Cannot use import statement outside a module"

 

I read in these forums that this might be fixable by changing the Draggable import to reference the /dist folder:

import { Draggable } from 'gsap/dist/Draggable';

 

But now I get the error:

"TypeError: Cannot read properties of undefined (reading 'style')"

 

As you can see in this screenshot, this appears to be happening in the gsap.registerPlugin part.

 

 

Unfortunately I haven't been able to find a reason why this is happening, or any possible solutions.

 

Is anyone able to suggest why this may be happening, and how I might fix this? Thanks for any help!

[Unexpected stagger behaviour]

Fantastic, thanks for the quick response @Cassie. Now fixed. 

[Unexpected stagger behaviour]

Hi. In the example codepen, I am expecting to see the white dots to stagger scale from 1 to 0, then once that animation has finished, scale from 2 + opacity 0 to scale 1 and opacity 1. Instead, it appears that the opacity is being set to 0 when the first animation is triggered. I have used the > timer marker to trigger the second animation after the first one has animated, which I would have thought would prevent the opacity being set to 0 until the second animation is triggered. Can anyone explain this behaviour and how to fix please?

See the Pen qBopQod by mattsnook (@mattsnook) on CodePen