Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Acmafali

Angularjs 1.5 and Greensock, not animating. - Plunker

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

Hey guys,

 

I'm having an issue with green sock at the moment, i'm having trouble integrating angular js 1.5 with GS. The animation isn't working at all, I'm not sure where I'm going wrong, maybe another pair of eyes can help resolve this. I've made a plunker which showing my issue:

 

https://plnkr.co/9Qmqp6iz5HNvSIKkrHDB 

 

 

Link to comment
Share on other sites

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

Ah! excellent! That was the problem! I was just really confused on how to deal with triggering elements on page load, now it all makes sense now. Cheers dude!

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

Yup that solved my issue! sorry for the late reply! Thank you for providing a plunker, my team managed to integrate gsap using this method.

Link to comment
Share on other sites

  • 4 years later...

Hi,

Check the AngularJS code given below -

 

angular.element(document.body).scope()

 

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