Obonye Posted March 24, 2021 Share Posted March 24, 2021 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. Link to comment Share on other sites More sharing options...
GreenSock Posted March 24, 2021 Share Posted March 24, 2021 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! 2 Link to comment Share on other sites More sharing options...
Obonye Posted March 24, 2021 Author Share Posted March 24, 2021 Thanks a lot. I will go through it and try migrate. Link to comment Share on other sites More sharing options...
GreenSock Posted March 24, 2021 Share Posted March 24, 2021 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! 1 Link to comment Share on other sites More sharing options...
Obonye Posted March 24, 2021 Author Share Posted March 24, 2021 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. Link to comment Share on other sites More sharing options...
Obonye Posted March 24, 2021 Author Share Posted March 24, 2021 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. Link to comment Share on other sites More sharing options...
GreenSock Posted March 24, 2021 Share Posted March 24, 2021 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. Link to comment Share on other sites More sharing options...
Obonye Posted March 24, 2021 Author Share Posted March 24, 2021 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. Link to comment Share on other sites More sharing options...
Obonye Posted March 24, 2021 Author Share Posted March 24, 2021 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 Link to comment Share on other sites More sharing options...
GreenSock Posted March 24, 2021 Share Posted March 24, 2021 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. 1 Link to comment Share on other sites More sharing options...
Solution GreenSock Posted March 24, 2021 Solution Share Posted March 24, 2021 I assume this is a related post that may solve the issue: 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