TaiwoJazz Posted November 9, 2022 Share Posted November 9, 2022 My code works fine in codepen but not in Html and Js... I think i'm not registering the plugin well properly.. My Code gsap.registerPlugin(MotionPathPlugin, TextPlugin); let select = e => document.querySelector(e); let selectAll = e => document.querySelectorAll(e); let pause = select('#pause'); let animation = gsap.to("#herman", { duration:6, ease:"none", motionPath:{ path:"#motionpath", align:"#herman" }, }); gsap.from("#pause", {x:300, duration:2}) My Error app.js:1 Uncaught ReferenceError: MotionPathPlugin is not defined at app.js:1:21 I don't need to register plugin in code pen and my code works fine... Also, is this the right place to place the CDN link in my HTML? <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.3/gsap.min.js"></script> <title>Document</title> <link href="/src/tailwind.css" rel="stylesheet"> </head> <body class="text-white w-full h-screen overflow-hidden text-center bg-[#C1D1EA] flex flex-col items-center justify-center"> <h1>Text Now</h1> <script src="app.js"></script> </body> </html> Link to comment Share on other sites More sharing options...
mvaneijgen Posted November 9, 2022 Share Posted November 9, 2022 Have you seen the installation helper on the docs? You can just select what plugins you want to use and it generates the import scrips for you. From your "My Code" block it seems like you're missing the imports, those you don't need on Codepen, because it will do that automatically for you. import { gsap } from "gsap"; import { MotionPathPlugin } from "gsap/MotionPathPlugin"; import { TextPlugin } from "gsap/TextPlugin"; gsap.registerPlugin(MotionPathPlugin, TextPlugin); https://greensock.com/docs/v3/Installation Hope it helps and happy tweening! Link to comment Share on other sites More sharing options...
TaiwoJazz Posted November 9, 2022 Author Share Posted November 9, 2022 Thanks... I guess i just need to grab the CDN link to those plugin as well... Link to comment Share on other sites More sharing options...
Rodrigo Posted November 9, 2022 Share Posted November 9, 2022 Hi, You can get the CDN links here: https://greensock.com/docs/v3/Installation#cdn Happy Tweening! 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