I used yarn to add these gsap libraries but the files appear disabled? What does this mean?

Question

I am attempting to use the greensock library for animation, and used yarn to add the library to my project but the files are appearing as "disabled view" (for lack of better word) in my directory. When I attempt to use the library in my JS file I am receiving a Missing plugin? gsap.registerPlugin() error in my browser console and the animation is not executing. I have ha ve attempted to solve this with gsap.registerPlugin(MotionPathPlugin, ScrollToPlugin, TextPlugin); but this results in an error (in browser console) that the plugin cannot be found. Any idea how to resolve this issue? What is going wrong? I have also tried to use the CDN delivery script in my HTML but and receiving the same Missing plugin? gsap.registerPlugin() error in the browser console.

Any insight and help is massively appreciated. Screenshot: screenshot of VS code

Answer 1

You need to import the plugins that you want to use in every file that you want to use them in. So the code at the top of the file should be:

import { gsap } from "gsap";
import { MotionPathPlugin } from "gsap/MotionPathPlugin";
import { TextPlugin } from "gsap/TextPlugin";
import { ScrollToPlugin } from "gsap/ScrollToPlugin";

gsap.registerPlugin(MotionPathPlugin, TextPlugin, ScrollToPlugin);

You can use the GSAP installation page, specifically the install helper, to help you get the correct formatting with your system.