KerveCreative

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

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!

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

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?