Jump to content

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

duration affecting reliability of .call(myFunc)

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, really impressed with GSAP having a great time building an interactive html5 animation with it.


I've got a weird issue that I'm trying to create in jsfiddle but unfortunately cannot.


The following code:

var getFebruaryTimeline = function(){
		var febtimeline = new TimelineMax()
			// bring in notice
			.from(assets.feb_notice, 1, {rotation:120, transformOrigin:"50% -20%", ease:Back.easeOut})
			// bring in woman
			.from(assets.feb_woman1, 1, {top:"+=600",rotation:-90, transformOrigin:"50% 100%", ease:Back.easeOut, delay:3}, 'woman')
			// bring in man
			.from(assets.feb_man1, 0.7, {top:"+=600",rotation:90, transformOrigin:"50% 100%", ease:Back.easeOut}, 'man')
			// dance a bit
			.to(assets.feb_woman1, 0.5, {top:"+=10", left:"+=10"}, 'man')
			.to(assets.feb_man1, 0.5, {top:"+=10", left:"+=10"}, 'dance1')
			.to(assets.feb_woman1, 0.5, {top:"-=0", left:"+=10"}, 'dance1')
			.to(assets.feb_man1, 0.5, {top:"-=20", left:"-=20"}, 'dance2')
			.to(assets.feb_woman1, 0.5, {top:"+=10", left:"-=10"}, 'dance2')
			.to(assets.feb_man1, 0.5, {top:"+=10", left:"+=10"}, 'dance3')
			// bring in suit
			.from(assets.feb_suit, 0.1, {opacity:0, onComplete:function(){
				$(assets.feb_man1).attr('src', $(assets.feb_man2).attr('src'));
			}}, 'suitswap')
			// lose the suit
			.to(assets.feb_suit, 1.5, {left:"+=50", top:"+=400", rotation:90, ease:Circ.EaseOut}, 'suitswap+=0.5')
			// embarassing
			.to(assets.feb_man1, 0.1, {top:"+=1", onComplete:function(){
				$(assets.feb_man1).attr('src', $(assets.feb_man3).attr('src'));
				$(assets.feb_woman1).attr('src', $(assets.feb_woman2).attr('src'));
			}}, 'suitswap+=1.2')

			// run away
			.to(assets.feb_woman1, 0.5, {left:"+=300"})
			.to(assets.feb_man1, 2, {left:"-=650"})
			// clear notice
			.to(assets.feb_notice, 0.5, {rotation:120, transformOrigin:"50% -20%"})

		return febtimeline;

on the line highlighted with "// bring in man" if the duration value is set to 0.7 then for some reason the .call(nextMonth) never gets executed. If I change this to 0.5 the call is fine!? All the other steps in the sequence run as expected just the call never happens.


I've got numerous similar animations and am experiencing similar fragilities throughout and so wondered if there was some known quirk I might be experiencing? There's quite a lot of other stuff going on (preloading the assets for each timeline before creation) hence the complexity in reproducing.


I'll keep trying to recreate in a simplified jsfiddle but thought I'd post this now in case there's something obvious I'm missing.



Link to comment
Share on other sites

Hi Danny. Welcome to the GreenSock forums.


Glad to hear you are having a good time with GSAP, outside of this issue.

From reviewing your code I can see that your animation is going to be quite good when you are done and you have a really strong handle on how to use the API. Great stuff.


I appreciate your efforts to simulate the problem using jsfiddle. That is really the best way for us to quickly and accurately assess the situation.


It is very strange that changing the duration of a single tween has any impact whatsoever on a call() executing later in the timeline. 


Not to sound defensive, but rather to give you a bit more confidence... GSAP takes timing and accuracy extremely seriously. The platform would be a total dud if things sort of worked sometimes and kind of flaked out at other times. We've seen it hold up under extreme circumstances and many folks rely on it daily for high-profile projects.


That said, there is always the possibility for a rare edge-case issue to surface. In those cases we are relentless at getting them patched up. 


Please keep hacking away at some sort of demo or test that we can use to replicate and troubleshoot the issue. We'll do our best to make sure everything is bullet proof.




EDIT: OH, please make sure you are using the most recent version of the platform which is 1.11.2 

  • Like 1
Link to comment
Share on other sites

Thanks Carl, I was fairly sure it was my issue somewhere but just wanted confidence I wasn't battling a known issue. Your information has helped boost that confidence so thank you :)


I've come this far with my jsfiddle and it's still holding up so I'm pretty sure I just need to find the bug in my own code somewhere http://jsfiddle.net/DannyT/wpdnF/1/

  • Like 1
Link to comment
Share on other sites

Okay so I've managed to reproduce this in a simple example, it seems to be related to repeat:-1




What should happen is when you click the spinning box, the next timeline will play through then throw an alert at the end.


The success of the final call being made is based on the following conditions for the duration set on line #9:


0.1, 0.2, 0.6 or 0.7 = Fail

0.3, 0.4, 0.5, 0.8, 0.9 or 1 = Success


Weird huh?


Now I know the conditions I can work around it but thought you might be interested.

Link to comment
Share on other sites

Just in case it helps anyone else with the same issue or with debugging the cause, the workaround I'm using is to avoid {repeat:-1} and instead just setting the repeat to a ridiculously high number:



Link to comment
Share on other sites

A few things to note:

  1. I generally wouldn't recommend trying to schedule anything "after" an infinitely repeating tween/timeline because technically that's impossible :) Internally, in order to avoid some math complications we cap the duration at 999999999999, but still, conceptually it's tough to understand appending a tween/timeline after an infinitely repeating one (what would the startTime be for the one "after"?). 
  2. Your demo exposed something very interesting in how the browser handles certain math scenarios. Try doing this: (999999999999.7 - 999999999999) * 1. You'd expect it to return 0.7, right? Nope. You get 0.699951171875. But if you do  (999999999999.3 - 999999999999) * 1, you get 0.300048828125 instead of 0.3. See for yourself - type it into the console. So that explains why you were seeing different behavior when you had a duration of 0.7 and 0.3 (for example). The browser was spitting back a number LESS than 0.7 when it did that math above, thus it was acting like the tween/callback didn't finish whereas with a duration of 0.3, it was appropriately finishing things. Weird, I know. In the next release of GSAP, I'll add some code to work around this edge case. 
  • Like 3
Link to comment
Share on other sites

Rather than "after" an infinitely looping TL what would you recommend for waiting for user input?


Just a completely new timeline I guess?

Link to comment
Share on other sites

I'm not entirely clear on what needs to happen in your app, but my guess is that separate timelines would be the way to go.

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.