Jump to content
GreenSock

Zuriel

Angular.js ng-view javascript animation's

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

I am not sure how familiar you are with angular.js but they have a ng-animate class that handles all the animation calls and it looks something like this.

angular.module('AppAnimations', [])
.animation('ecocool-in', ['$rootScope', function() {
	return {
		setup: function(element) {
			TweenMax.set(element, {opacity:0, right:'100px', width:'100%', position:'aboslute'})
			TweenMax.set($('body'), {overflow: 'none'})
		},
		start: function(element, done) {
			TweenMax.to(element, .6, {delay:.6,opacity:1, right:0, ease:Power2.easeOut, onComplete:function() {
				done();
				TweenMax.set(element, {opacity:1, right:0, width:'100%', position:'relative'})
				TweenMax.set($('body'), {overflow: 'scroll'})
			}})
		}
	}
}])
.animation('ecocool-out', ['$rootScope', function() {
	return {
		setup: function(element) {
			TweenMax.set(element, {width:'100%'})
		},
		start : function(element, done) {
			TweenMax.to(element, .6, {opacity:0, y:+100,ease:Power2.easeIn, onComplete:done})
		},
		cancel: function(element, done) {
			TweenMax.to(element, .5, {opacity:0, y:100, ease:Power2.easeIn, onComplete:done})
		}
	}
}])

When I run the website and I click a route it calls the ecocool-out animation and it plays fine.  When I call the ecocool-in animation it plays fine.

 

the Cancel is only called when the animation is currently playing and another link is clicked.

 

When I do that, I get this:

[Exception... "Could not convert JavaScript argument arg 0 [nsIDOMWindow.getComputedStyle]" nsresult: "0x80570009 (NS_ERROR_XPC_BAD_CONVERT_JS)" location: "JS frame :: http://localhost/js/TweenMax.js :: p._onInitTween :: line 4045" data: no]
	

...r"),debug:function(){var c=e("debug");return function(){b&&c.apply(a,arguments)}...

angular.min.js (line 63)
NS_ERROR_XPC_BAD_CONVERT_JS: Could not convert JavaScript argument arg 0 [nsIDOMWindow.getComputedStyle]
	

_cs = _getComputedStyle(target, "");

29
TweenMax.js (line 4045)

on Firefox.

 

and on safari I get this:

[Error] TypeError: 'undefined' is not an object (evaluating 'style.zIndex')
	_onInitTween (TweenMax.js, line 4049)
	_initProps (TweenMax.js, line 6091)
	_init (TweenMax.js, line 6050)
	render (TweenMax.js, line 208)
	render (TweenMax.js, line 5757)
	_updateRoot (TweenMax.js, line 5878)
	dispatchEvent (TweenMax.js, line 5246)
	_tick (TweenMax.js, line 5290)

is it a zIndex issue?  i take the zIndex and i add it or remove it and it doesn't matter. its almost like its something that angular is doing with the way it handles things? but it works fine until the cancel. and css3 animations work great.  they have no issue rapidly clicking links and canceling the animation.  it has to be something I am missing or not applying.

 

Can someone help from just the info I provided?   Thanks!

Link to comment
Share on other sites

hello ..

 

I did notice in your code above.. your trying to set a css overflow property to 'none' .. 'none' is not a proper value for overflow.

https://developer.mozilla.org/en-US/docs/Web/CSS/overflow

this is probably unrelated to your issue, but I thought it might help to use one of the accepted values: visible, hidden, scroll, auto

also could you please provide an example or a codepen, jsfiddle example to better help you? thx

  • Like 3
Link to comment
Share on other sites

I also noticed a

position:'aboslute'

which should be

position:'absolute'

 

And I agree with Jonathan; I think we're going to need a codepen or jsfiddle to track this down.

  • Like 1
Link to comment
Share on other sites

ok those 2 issues you found don't mean anything with the error (i think) because I was just trying to put something together for the forum.  Trust me, when i say i have tried something as simple as opacity 0 and opacity 1 and no other properties.

 

well..  i tried to put together a simple fiddle, but i can't even get the fiddle to animate, let alone dealing with the cancelling issues.  here is the fiddle

 

http://jsfiddle.net/Zuriel/VDpNb/

 

obviously switching this out to just css3 animations work, its something in my code there for the javascript. 

 

at the end of each animation "done" needs to be called.  per angular.js's way of doing the ng-animate

 

the rest is self explanatory.  setup, start, cancel.   in and out.

Link to comment
Share on other sites

bump for justice.

 

getting all sorts of issues with tweenmax and angular.  don't know if someone can just read these errors and give me a vague idea as to why i keep getting the same errors.  were talking across multiple projects. with multiple things.. i can't even get it to work on jsfiddle.  It sounds like tweenmax is just losing track of the elements its handling (probably because of something angular does when it starts taking control). or tweenmax is just looking for something that isn't there. or maybe the scope has changed?

Link to comment
Share on other sites

I even have websites where they are doing things.. but not with NG-VIEW

 

http://www.yearofmoo.com/2013/05/enhanced-animations-in-angularjs.html

 

only with simple lists and objects.. 

 

 

look...  I even took their demo..  copied the module JS code.  copied the HTML code. and set it to a NG-VIEW and when I do it slowly.. it works great.

 

when I rapidly click em from 1 to 2 to 1 to 2  I get a error.

 

NS_ERROR_XPC_BAD_CONVERT_JS: Could not convert JavaScript argument arg 0 [nsIDOMWindow.getComputedStyle]
 
ok...  I think that means that whatever tweenmax is trying to do.. it can't because whatever it wants is not there... 
 
so the question is.  is it tweenmax's fault. or angular's fault.  and if its angulars fault.. which I think it is...  what Can I do to PASS whatever I need to pass to tweenmax to tell it to relax and not give me errors.  thats what im trying to figure out.
 
now JSFIDDLE is not helpful because i can't even get it to work period with tweenmax and angular.. probably cause its in a frame and its all beat up..   no idea.
Link to comment
Share on other sites

ok knock yourselves out.

 

http://zadesigns.com/gsap/

 

 

click on a link at the top nav.  it goes to a new section.  click another link. it goes back.

 

now try and click a link and WHILE its animating, click a new link. 

 

that is the error.

 

I think its angular's issue but it doesn't have that issue with CSS3.. only with tweenmax..  so it has to be something that "I" may be missing???

Link to comment
Share on other sites

this might be a bug in angular, since others were getting this same issue a couple of months a go..

 

https://github.com/angular/angular.js/issues/2400

 

https://github.com/angular/angular.js/pull/2405

 

i see that same behavior from your link above.. but it looks like this is not a GSAP bug but a Angular issue since i am seeing that on that angular demo page and this bug has been reported on the Angular bug issue log.. it was reported as possibly fixed.. but looks like its still happening

  • Like 1
Link to comment
Share on other sites

I'm swamped at the moment and can't dig into this yet, but I can assure you that some of the top Angular guys out there are using GSAP with it. The guy who literally did the official videos on the home page of Angular (John Lindquist) is a big GSAP user, and e-mailed me recently saying he had recently done a class about Angular and GSAP working together. So I'm confident things should work great but clearly you're running into an issue. Can you please zip up a simple set of example files (with all dependencies) and post them here? I know you posted a link to your site, but we can't edit the files and save them back to your server, and when I try to save them locally, I'm getting all sorts of errors thrown by jQuery and angular about cross domain policies and missing files, etc. It certainly seems like whatever angular is passing as "element" to your module functions isn't really an element at all (at least that's what it seems like right now). It'll be much easier to troubleshoot once you provide a simple example set of files with all dependencies. 

  • Like 1
Link to comment
Share on other sites

ok! here are the files

 

http://www.zadesigns.com/gsap/gsap.zip

 

the index.html has     <base href="/gsap/">

 so if you put it in a root or somewhere else you need to change that

 

I know that angular 1.2rc3 is being rewritten to fix alot of animation issues but its not the safe version atm.  maybe some of the issues I am having are part of that fix.

Link to comment
Share on other sites

Hi Zuriel --

Matias Niemela and I are looking into this... we will get back to you asap.

  • Like 1
Link to comment
Share on other sites

awesome! thank you for checking!

 

on a side note, I rebuilt a project with angular 1.2rc2, UI-ROUTER 0.2.0-1.2angular branch and tweenmax and I don't have the same issues with a simple ng-view (or ui-view in ui-router)

 

it works as it should...   I am going to move forward with some stuff with 1.2 and see if any other more complex animations break when I start including more nested views and other controls, but i love the way 1.2 animations work so far. 

 

still don't think I can do any animation in cancel can i? or is there a way to defer the loading of a new state when you cancel the old state. but thats another question unrelated :) 

Link to comment
Share on other sites

  • 1 month later...

Do you guys still need help on this? Please upgrade to 1.2.1 since it contains a lot of animation-related fixes.

Link to comment
Share on other sites

I haven't upgraded to 1.2.1 yet but I was using the 1.2 RC and it did indeed fix itself.  The only issue i have is throttling pages.  with a animation time of 0 seconds you can rapidly click links and pages have no problem unloading and loading without issue but when you put animation into the equation you have to throttle the requests or you will have issues.  If we assume a normal person won't rapidly click links we'd be ok but you start to notice the issue when you use the forward and back browser history (like clicking back 3 or 4 times) which invokes the in and out animations 3 or 4 times.  I've remedied this mostly by telling tweenmax to force complete on all the cancelled animations which then calls the done(); for angular, but I feel like its still alot of code to deal with.  You can see this problem on your own page here at

 

http://yearofmoo-articles.github.io/angularjs-2nd-animation-article/app/#/

 

try rapidly clicking the views and you can see how angular doesn't clear the last view out and the new view is coming in.

 

I was having this same issue on my pages using the forward and back buttons of history or rapidly changing pages.

 

Another issue I am having is that because angular overlaps the animations.  in and out happen at the same time, we have to responsibly control the delay of them.. and if we decide to do a fade between two scenes then we have to absolute position the views briefly when we fade them over top of eachother.  otherwise if they are position:relative then they will stack and push eachother around.

 

I don't know if the solution is that we have to create our own containers or ways to wrap the object of if there is a universal fix that could be applied at the core level for all animations people do with overlapping transitioned ng-views?

Link to comment
Share on other sites

  • 7 months later...

I'm swamped at the moment and can't dig into this yet, but I can assure you that some of the top Angular guys out there are using GSAP with it. The guy who literally did the official videos on the home page of Angular (John Lindquist) is a big GSAP user, and e-mailed me recently saying he had recently done a class about Angular and GSAP working together. So I'm confident things should work great but clearly you're running into an issue. Can you please zip up a simple set of example files (with all dependencies) and post them here? I know you posted a link to your site, but we can't edit the files and save them back to your server, and when I try to save them locally, I'm getting all sorts of errors thrown by jQuery and angular about cross domain policies and missing files, etc. It certainly seems like whatever angular is passing as "element" to your module functions isn't really an element at all (at least that's what it seems like right now). It'll be much easier to troubleshoot once you provide a simple example set of files with all dependencies. 

hello,

 

do you have any update on John Lindquist's cass for using GSAP with AngularJS? Will you consider making some tutorials on here to show how to use GSAP properly in AngularJS? With AngularJS being in high demand right now, it would be very helpful.

Link to comment
Share on other sites

  • 8 months later...

Hello, for ng-view you can use $rootScope.$on('$viewContentLoaded'

app.run(['$rootScope', function ($rootScope)
         {
            $rootScope.$on('$viewContentLoaded',function(event, viewConfig){ 
                        TweenMax.fromTo($('.anim-smooth') ,2,  {autoAlpha: 0, display:'none'},{autoAlpha: 1, display:'block'});

      });
 }]);
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.
×