Jump to content
Search Community

Importing GSAP issues with Angular

JustinNobles test
Moderator Tag

Recommended Posts

I have been trouble setting up Draggable with Angular. I found a stackblitz that worked, with draggable but was an older version as I duplicated the code and it didn't work specifically with imports. I have seen forums saying to put import gsap from "gsap" with gsap.registerPlugin(Draggable); which seems straightforward but when I did that in a simple application using GSAP it doesn't work. Any help would be appreciated!

 

This is the stackblitz where Draggable works with Angular + GSAP that doesn't work with a newer version of GSAP

https://stackblitz.com/edit/angular-kyfkfu?file=package.json

Link to comment
Share on other sites

I have pretty much zero experience with Angular, but I know plenty of people use GSAP in Angular - it should be as easy as installing the latest version of GSAP (like "npm install gsap"). Your demo had the GSAP version specified as "gsap": "2.0.1", thus it was quite outdated. The latest version is 3.6.0 right now.  Either change that in your package.json or maybe re-install GSAP. 

 

And Draggable comes as a part of the GSAP package from NPM. Then you can import it normally like anything else, like import Draggable from "gsap/Draggable"

 

 

And then of course you've gotta register Draggable as a plugin: 

import Draggable from "gsap/Draggable";

gsap.registerPlugin(Draggable);

This might be helpful: https://greensock.com/install

 

And GSAP doesn't have any dependencies, plus it can literally animate anything JavaScript can touch, so it should be pretty easy to tap into in Angular.

 

Let us know if you run into any specific issues. 

  • Like 1
Link to comment
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...