Jump to content
Search Community

Some tweens not firing in TimelineMax randomly

omnider test
Moderator Tag

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



Link to comment
Share on other sites

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

  • Like 2
Link to comment
Share on other sites

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



Link to comment
Share on other sites

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 :)

Link to comment
Share on other sites

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. 

  • Like 1
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...