Some tweens not firing in TimelineMax randomly

[omnider]

Hi,

 

I have the following problem when using TimelineMax. I have quite a simple timeline which I create on $(document).ready(function(){});

subLogo = $('.sub-logo');
	title = $('.hp .claim');
	p1 = $('.hp .p1');
	p2 = $('.hp .p2');
	p3 = $('.hp .p3');
	p4 = $('.hp .p4');
	p5 = $('.hp .p5');
	cta = $('.hp .cta');
	
	hpTim = new TimelineMax({paused:true});
	hpTim.from(subLogo,1,{autoAlpha:0});
	hpTim.appendMultiple(TweenMax.staggerFrom([p1,p2,p3,p4,p5],.5,{marginLeft:-1800, ease:Expo.easeOut, delay:1},.2));
	hpTim.from(title,.5,{marginTop:-500, ease:Expo.easeOut});
	hpTim.from(cta,2,{marginTop:800, ease:Elastic.easeOut});

I play the timeline on $(window).load(function(){}) . 

 

Now the problem being is that sometimes, some elements do not tween. They are correctly set by the timeline on its initiation to their positions but then some of them do nothing on the $(window).load function. This is not only specific to this situation I would say as I've seen this behavior before.

 

From the information I provided, can anyone tell me if there is something obvious that is causing the problem? Thanks for any info

 

Cheers

[GreenSock]

I have 2 guesses:

1. Your selectors aren't grabbing things correctly. You mentioned that you're creating this timeline BEFORE the page fully loads, so I wonder if the browser is still parsing HTML at that point and some of your elements don't exist yet. Or perhaps jQuery isn't loaded yet. Tough to say without seeing it in context.
2. Maybe you're creating some overlapping tweens elsewhere in your code/app that you didn't show here. For example, if you have an element's "left" property tweening for 3 seconds, but then you create another tween of that same element's "left" property halfway through that first tween, it'll of course overwrite it (correctly).  

If you're still having trouble, please post a very simple codepen or jsfiddle so that we can see the issue in context. I can assure you that GSAP should be rock-solid and never "randomly" forget to render a tween. I'm confident that if things aren't firing, there's a clear reason somewhere - we just need to see what's going on in order to diagnose things. Typically when I hear about something like this, it's related to some other conflicting code that the person has in their app (not that it's the case with you - I'm just saying that's normally what I see). 

[omnider]

Hi, sorry for the late response. 

I've created a simple codepen, basically just copying parts of the code from the actual site. If you run the animation certain amount of times I'm sure you'll notice there are some elements missing sometimes.

 

See the Pen yxgDa by omnider (@omnider) on CodePen

 

I was kinda hoping you were right about other parts of the code messing up with the elements, but since it's happening on codepen as well, I'm really clueless Thanks for any insights

 

Cheers

[omnider]

I just noticed one thing. This specific issue is actually quite difficult to reproduce on powerful machines. It's happening a lot more often on machines where the animation isn't running 60fps... If you have one of those around, it might help

[jamiejefferson]

Hmm I'm not sure, nothing really jumps out me in your code, but I can't get it to happen on any of my browsers either (I don't have a slow computer, but I tried it with cache both on and off and saw no difference other than load time). Any particular elements that tend to go missing or is it random?

 

Maybe you could try updating to the latest version of GSAP and seeing if that works any differently for you?

 

Also, this:

<script type="text/javascript" src="http://ferplej.cz/js/gs/plugins/CSSPlugin.js"></script>
<script type="text/javascript" src="http://ferplej.cz/js/gs/easing/EasePack.js"></script>
<script type="text/javascript" src="http://ferplej.cz/js/gs/TimelineMax.js"></script>
<script type="text/javascript" src="http://ferplej.cz/js/gs/TweenMax.js"></script>

should just be this:

<script type="text/javascript" src="http://ferplej.cz/js/gs/TweenMax.js"></script>

TweenMax includes TweenLite, TweenMax, TimelineLite, TimelineMax, easing.EasePack, plugins.CSSPlugin, and more. 

[omnider]

Ha! didn't know that. Old habit from AS I guess And it seems to do the trick (loading only TweenMax).

Thanks a lot