Jump to content
Search Community

Angularjs 1.5 and Greensock, not animating. - Plunker

Acmafali test
Moderator Tag

Go to solution Solved by OSUblake,

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Hi,

 

Well, what I see is that there's nothing triggering the animation event.

 

Check this Plunk by Blake:

 

https://plnkr.co/edit/midHzP?p=preview

 

Blake is adding the click event to the app:

<html ng-app="app" ng-click="moveBall($event)">

Also this video by egghead is very useful to get started with Angular and GSAP:

 

https://egghead.io/lessons/angularjs-animating-with-javascript

 

Happy Tweening!!

  • Like 3
Link to comment
Share on other sites

Just like Rodrigo said, there's nothing triggering the animation. You need to use a directive or the $animate service to do those type of animations. Another thing that is not obvious is that on loading your page, an animation won't start even with a directive if you're element already exists, so you need to use $timeout to trigger it.

https://plnkr.co/edit/hipcdSWAGo6xZUmkGEQh?p=preview

  • Like 3
Link to comment
Share on other sites

Hey guys,

 

Thank you for helping me out before but i have realised that i actually need to access to the scope using the ng animate module but I cant actually create and access the global timeline object in my animation function, so I would need to create a directive which isn't a problem, i need this so I can rewind and resume the timeline with button clicks. I'm just wondering do you guys have any elegant solutions at hand to resolve this problem or do you see any issues making use of a directive so that we can access the scope timeline object. 

 

Thanks again for your help.

Link to comment
Share on other sites

Mhh... my first try would be to do it in the link function of the directive. But I've never done something like this, mostly simple enter, leave and view stuff.

 

Perhaps this article could help you:

 

http://onehungrymind.com/build-super-smooth-rollover-angularjs-greensock-timelinelite/

 

I'm sure Blake will come with the right answer for this.

  • Like 1
Link to comment
Share on other sites

  • Solution

Keep in mind that Angular 1.5 literally is 1.5. It's part Angular 1, and part Angular 2. Scopes and directives are for the most part deprecated. It's recommended to start using components and controllers for everything. It might also help to start using ES6, as you can use classes for most things.

 

If you declare a timeline on a controller using 'this', you can access it inside an animation module using the jQuery/jqLite .controller() method. You should probably also reset the 'done' callback in the timeline vars.

 

It might seem like more work, but it pays off in the end.

https://plnkr.co/edit/UyRmn3ZbGZj40U2QtCyI?p=preview

  • Like 3
Link to comment
Share on other sites

  • 4 years later...
  • 2 years later...

@Infycle Technologies It's pretty tough to troubleshoot without a minimal demo - the issue could be caused by CSS, markup, a third party library, your browser, an external script that's totally unrelated to GSAP, etc. Would you please provide a very simple CodePen or Stackblitz that demonstrates the issue? We can't effectively troubleshoot a live site. 

 

Please don't include your whole project. Just some colored <div> elements and the GSAP code is best. See if you can recreate the issue with as few dependancies as possible. If not, incrementally add code bit by bit until it breaks. Usually people solve their own issues during this process! If not, then at least we have a reduced test case which greatly increases your chances of getting a relevant answer.

 

Here's a starter CodePen that loads all the plugins. Just click "fork" at the bottom right and make your minimal demo

See the Pen aYYOdN by GreenSock (@GreenSock) on CodePen

 

Using a framework/library like React, Vue, Next, etc.? 

CodePen isn't always ideal for these tools, so here are some Stackblitz starter templates that you can fork and import the gsap-trial NPM package for using any of the bonus plugins: 

 

Please share the StackBlitz link directly to the file in question (where you've put the GSAP code) so we don't need to hunt through all the files. 

 

Once we see an isolated demo, we'll do our best to jump in and help with your GSAP-specific questions. 

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...