Jump to content
Search Community

Only latter half of my Timeline is animating...?

azuki 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

Hi greensocks,

 

I'm creating an animation sequence for an element in a site that I'm trying to get to start once the whole div has loaded. My difficulty isn't in starting the animation but in having the entire animation play. From my understanding of TimelineMax, each animation will play in order so if the 1st animation in the timeline doesn't execute, the following animations won't either. Am I wrong in that understanding?

 

Here's what I've got now:

 



<script language="JavaScript" type="text/javascript">
function playBdayTimeline() {
var bdaySurprise = document.getElementById("headline1");
var ourBday = document.getElementById("headline2");
var bdayPromoGift = document.getElementById("promoGift");
var bdayPromoDay = document.getElementById("promoDay1");
var timelineIntro1 = document.getElementById("timelineIntro1");
var timelineIntro2 = document.getElementById("timelineIntro2");
var timelineIntro3 = document.getElementById("timelineIntro3");
var promoDeal = new TimelineMax();

promoDeal.from(bdaySurprise, .7, {css:{autoAlpha:0, top:'-20px'}, ease:Quad.easeOut});
promoDeal.from(ourBday, .6, {css:{autoAlpha:0, top:'-15px'}, delay:-.4, ease:Quad.easeOut});
promoDeal.to(bdayPromoGift, .6, {css:{alpha:1, scale:2}, delay:-.4, ease:Quad.easeOut});
promoDeal.to(bdayPromoDay, .6, {css:{autoAlpha:1}, delay:-.1, ease:Quad.easeOut});

promoDeal.from(timelineIntro1, 1, {css:{autoAlpha:0, top:'-15px'}, delay:-.2, ease:Quad.easeOut});
promoDeal.from(timelineIntro2, 1, {css:{autoAlpha:0, top:'-15px'}, delay:-.4, ease:Quad.easeOut});
promoDeal.from(timelineIntro3, 1, {css:{autoAlpha:0, top:'-15px'}, delay:-.4, ease:Quad.easeOut});
promoDeal.from(introSlider, .6, {css:{autoAlpha:0, }, ease:Quad.easeOut});
}
</script>


 

From the above, the second half of the timeline (bottom four of the promoDeal timeline) animate in beautifully smooth sequential order. However, they do so after the first half of the timeline just "pop" in... no animation whatsoever.

 

If I change any of the properties in the first four lines (ie.change to scale: .5), they take but they don't animate so something seems to be working there...

 

What's going on here? Why would only part of my timeline execute?

 

Thanks for any ideas!!

Link to comment
Share on other sites

Hi,

 

Your TimelineMax (and all GreenSock tweens) respect how much time has elapsed. So no, the timeline does not wait for the first 4 tweens to animate through to completion before the 5th tween starts.

 

Let's just say you have 3 tweens that are each 1 second long and they are structured to play one right after the other. If something occurs within the browser that causes a big cpu hit .5 seconds into the timeline and it takes the browser 2 seconds to recover, the timeline will resume half way through the third tween. You will never see the second tween play, but the 1st and 2nd tweens will appear in their completed state.

 

Basically after the browser recovers, TimelineMax says "oh gosh, how much time has transpired since this timeline started playing? 2.5 seconds???!!! oh boy I better jumpt to the 2.5 second point of my timeline" (which would be .5 seconds into the third tween).

 

For your problem there are 2 very likely things happening

 

1) There is some inordinate amount of processor stress happening while your timeline is starting to play. As an experiment please give your Timeline a delay

 

var promoDeal = new TimelineMax({delay:3});

 

if you give the timeline a delay, does the first half play any better?

 

2) You are trying to tween properties that haven't been properly initialized. For instance, if you are tweening an element's alpha TO 1, are you certain that the element's alpha is something less than 1 before that tween occurs?

 

There is the off chance that you are using a weird browser that has some bugs or even possibly that you stumbled into some weird bug in the greensock code. From the set up of your code what you are doing appears to be fairly standard so I really don't suspect the latter.

 

If my suggestions don't help you identify an error, please feel free to zip your html/css/js files and attach them here. We will gladly look at them.

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