Property 'defaultEase' does not exist on type 'typeof TweenLite'.

[Obonye]

Hi guys! 

I have been trying to add this line to my code: 

TweenLite.defaultEase = Linear.easeNone;

But it is throwing  this error:
Property 'defaultEase' does not exist on type 'typeof TweenLite'.

 

It seems to function fine on stackblitz but will not do the same on my ide. I am trying to implement a carousel with Angular using the gsap 2 library. If someone can assist with a work around I'd be greatful. Note, i'm new to gsap and I have to submit a challenge in an 3 hours so going through the lessons is not the ideal thing at the moment.

[GreenSock]

Welcome to the forums, @Obonye. It looks like you're using the very old syntax - there's no need for TweenLite, TweenMax, TimelineLite, or TimelineMax anymore - they're all condensed into a simple "gsap" object. See

Furthermore, in GSAP 3 we improved the defaults too. You can set the default ease (or almost any other property) like this: 

gsap.defaults({ease: "none"});

Notice that ease: "none" is the same thing as the old Linear.easeNone. 

 

If you're just getting started with GSAP, I'd strongly recommend

You might also want to consider signing up for @Carl's video course.

 

Happy tweening!

[Obonye]

Thanks a lot. I will go through it and try migrate.

[GreenSock]

Sounds good. If you need help in the future, it's always best to provide a minimal demo so we can see what you're working with. 

 

Enjoy!

[Obonye]

I'm getting an error message when I import gsap.

From Some comments I read that there is no need to import gsap because it comes by default but when I try register a draggable plugin I get errors. When I import the error that remains is gsap has no exportable member gsap. 

[Obonye]

Hi again this is my code: 

https://stackblitz.com/edit/angular-ivy-k1acz8?file=src%2Fapp%2Fapp.component.ts

 

When running the code in vs code the app is blank and only starts displaying the content after dragging. 
Also I get those errors on my ide that are on the stackblitz. 

 

 

import { gsap } from "gsap";

import { Draggable } from "gsap/Draggable";

 

Error in src/app/app.component.ts (12:22)

Cannot find module 'gsap' or its corresponding type declarations.

[GreenSock]

It looks like you didn't have GSAP set up as a dependency. I noticed in your package.json file you only had "@types/gsap": "^1.20.2" which is definitely wrong. Don't use those - they're not from GreenSock. It's a very old 3rd party thing. 

 

In StackBlitz, go to "dependencies" and just type in "gsap" in the "add" field. It should be that easy. You may have to refresh the list or something to make sure it actually installs GSAP via NPM. 

 

In your local environment, it should be as simple as running "npm install gsap" - that's it. There are detailed instructions about all the ways you can install GSAP here.

 

Once I did that it fixed the error but then there was another one that's unrelated to GSAP: 

Error: The selector "app-root" did not match any elements

Looks like an Angular-related thing. 

 

I hope that helps. 

[Obonye]

Oh snap so I forgot that on Stackblitz because I was rushing to go drop off my daughter at school. However, on vs code I followed the instructions on how to install gsap in Angular but I still get the gsap doesn't have exports error message.

[Obonye]

1 hour ago, GreenSock said:

It looks like you didn't have GSAP set up as a dependency. I noticed in your package.json file you only had "@types/gsap": "^1.20.2" which is definitely wrong. Don't use those - they're not from GreenSock. It's a very old 3rd party thing. 

 

In StackBlitz, go to "dependencies" and just type in "gsap" in the "add" field. It should be that easy. You may have to refresh the list or something to make sure it actually installs GSAP via NPM. 

 

In your local environment, it should be as simple as running "npm install gsap" - that's it. There are detailed instructions about all the ways you can install GSAP here.

 

Once I did that it fixed the error but then there was another one that's unrelated to GSAP: 

Error: The selector "app-root" did not match any elements

Looks like an Angular-related thing. 

 

I hope that helps. 

It helped a lot.

The installation is working well. 
so this is the blank white screen I'm getting please have a look. The elements only appear after dragging.  Thank you for your patience and time.

 

https://stackblitz.com/edit/angular-ivy-k1acz8?file=src%2Fapp%2Fapp.component.ts

 

 

 

[GreenSock]

That definitely looks like an Angular issue/question. I'm not an Angular guy, sorry. I wonder if it's a lifecycle thing, like if the elements that you're telling GSAP/Draggable to affect aren't there yet or they got swapped out by Angular somewhere along the way? I'm totally guessing here. If you can recreate the issue outside of Angular, like in a plain CodePen or something, I'd be happy to take a peek. 

[GreenSock]

I assume this is a related post that may solve the issue: