jxy Posted November 15, 2021 Share Posted November 15, 2021 I installed the zip file by running "npm install ./gsap-bonus.tgz", then tried to import the "Draggable" plugin but failed. If I import like this: import { gsap } from "gsap"; import { Draggable } from "gsap/Draggable"; gsap.registerPlugin(Draggable); ... I get this error: If I import like this: import { gsap } from "gsap/dist/gsap"; import { Draggable } from "gsap/dist/Draggable"; gsap.registerPlugin(Draggable); ... I get this error: PS: I successfully installed and imported the plugin into a "create-react-app" boilerplate project. So there must be compatibility issues with Next.js 12 and gsap....? Link to comment Share on other sites More sharing options...
Solution GreenSock Posted November 15, 2021 Solution Share Posted November 15, 2021 I believe Next doesn't understand ES Modules, so you just need to import from the /dist/ directory like: import gsap from "gsap/dist/gsap"; import Draggable from "gsap/dist/Draggable"; And the error about "style" being unreadable, that's most likely because you're trying to gsap.registerPlugin() or animate BEFORE the window/document are available. Make sure you only interact with GSAP when the window and document are defined. 1 Link to comment Share on other sites More sharing options...
jxy Posted November 15, 2021 Author Share Posted November 15, 2021 41 minutes ago, GreenSock said: I believe Next doesn't understand ES Modules, so you just need to import from the /dist/ directory like: import gsap from "gsap/dist/gsap"; import Draggable from "gsap/dist/Draggable"; And the error about "style" being unreadable, that's most likely because you're trying to gsap.registerPlugin() or animate BEFORE the window/document are available. Make sure you only interact with GSAP when the window and document are defined. Thanks for your reply! I was trying to import gsap and Draggable into an empty create-next-app (no animation code at all). I placed gsap.registerPlugin(Draggable) right below where I import gsap and Draggable. It didn't work: triangle.js: import React from "react"; import { gsap } from "gsap/dist/gsap"; import Draggable from "gsap/dist/Draggable"; gsap.registerPlugin(Draggable); function Triangle() { return ( <></> ); } export default Triangle; index.js: import Triangle from '../components/triangle'; export default function Home() { <Triangle /> } Where else should I place the gsap.registerPlugin(Draggable); code then? Thank you! Link to comment Share on other sites More sharing options...
jxy Posted November 15, 2021 Author Share Posted November 15, 2021 5 hours ago, GreenSock said: I believe Next doesn't understand ES Modules, so you just need to import from the /dist/ directory like: import gsap from "gsap/dist/gsap"; import Draggable from "gsap/dist/Draggable"; And the error about "style" being unreadable, that's most likely because you're trying to gsap.registerPlugin() or animate BEFORE the window/document are available. Make sure you only interact with GSAP when the window and document are defined. I fixed this! You are so right! Simply placing gsap.registerPlugin(Draggable); inside of useEffect hook fixed this! Thank you so much!! So far my experience with Greensock has been awesome! Something like this: import React, { useEffect } from "react"; import { gsap } from "gsap/dist/gsap"; import Draggable from "gsap/dist/Draggable"; export default function Component() { useEffect(() => { gsap.registerPlugin(Draggable); Draggable.create('#draggablediv', { }); //... }, []); return ( // ... ); } 1 Link to comment Share on other sites More sharing options...
OSUblake Posted November 15, 2021 Share Posted November 15, 2021 Related thread... 1 1 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