Animations lag into position when sequenced together.

[Portal_Zii 0 Likes (Newbie)]

Hey guys! I am working up a new animated banner for my boss's site. I have 4 banners. Each one animated in to view and animated out of view.

I just finished all their animations. I commented out the js and html for each individual banner while I worked on the animation. They are strung together as once leangthy animation due to my lack of knowledge with JS and Gsap but think it should work okay.

However when I removed all my commented out JS and HTML to string all the animations together to play in "sequence" Every animation except the first example will lag into place and not show the whole animation.


I am not really equipt to figure this out. I have no idea why it would act this way. The animations play smoothly when not linked together.

You can see an example preview of my project here: http://portalpacific.net/Al/PennyGrab2.1/

And I have also included a zip file here for anyone willing to take a look at help me. 
http://portalpacific.net/Al/PennyGrab2.1/PennyGrab2.1.zip

Thanks so much for your time! Any help at this point is beyond appreciated! 

[Oliver16Years 207 Likes (Specialist)]

Maybe your delay dummy tweens get across with each other. 

tl.from('#delay', 0.5, {})
.from('#gCoin1', 0.2, {top: -800, rotation:-50, ease: Sine.easeOut}, '-=0.8')
...

 

I would use label relative timing:

.addLabel( 'transition99', 'transition98+=5' ) // next transition starts after the prewious transition's start + 5 sec
.from('#gCoin1', 0.2, {top: -800, rotation:-50, ease: Sine.easeOut}, 'transition99-=0.8')
...

Just an idea

[Portal_Zii 0 Likes (Newbie)]

But is that the reason my animations are lagging into place? i dont understand.

[Carl 9,719 Likes (Superhero)]

Thanks for the demo files. 

 

It wasn't clear to me that I had to sit and wait for each banner to play and then wait for the next one to come in. i kept looking at the first animation thinking everything was fine. But, yes, after realizing there was more to see I could see the lag. Its very strange why it is performing that poorly. I don't recall ever seeing something like that. 

 

If you look at the animation on the GreenSock homepage you can see that there are a lot more things being animated in much more complex ways and the animation is silky smooth. I only bring that up to reinforce the idea that GSAP is more than capable of doing what you want flawlessly.

 

We really don't have the time or resources to troubleshoot your production files but i was intrigued by the lag and took a look at the source.

 

My guess right now is that you are doing a lot of positional tweens meaning you are using properties like top, left, marginLeft, and marginTop. These properties are much harder for the browser to handle as they trigger document reflow. It is much better to animate x and y instead which will use css transforms and will be hardware-accelerated. 

 

to test my theory I edited slide3 and slide4 and dropped in x and y (instead of left and top). It seems to work considerably better.

 

Also to make debugging easier I added some buttons that help you jump to each slide (or banner). This can save you many hours of time.

 

take a look at the attached zip

 

You did a great job with the GSAP code and animation as a whole. I think switching to x and y might take a little time but will be worth it.

PennyGrab2.2.zip