Tweening multiple objects at the same time lag

[Michael71 59 Likes (Contributor)]

Hello,

 

As the title suggests I'm trying to tween multiple objects <div> at the same time to create an explosion effect, because these divs contain text characters so the total amount is about 400.

The tween is happening although the total experience seems laggy.

 

I made a quick pen here: http://cdpn.io/DpbIy

 

Thanks.

[Carl 9,066 Likes (Superhero)]

It seems you are hitting the limits of what the browser can feasibly render. GSAP can handle 400 tweens without missing a beat (http://www.greensock.com/js/speed.html), but its the browser that needs to render all the changes and this is where you will notice some lag. 

 

I removed both the scaleX and scaleY props from your tween and noticed that it ran silky smooth.

 

Scaling and rendering text is probably the most taxing procedure for the browser. 

 

Thanks a ton for creating that pen. It's very cool! I wish I had better news for you about the scaling. Perhaps someone else has a tip that could help.

[Michael71 59 Likes (Contributor)]

Very interesting that scaling limit. I used fontSize:'+=35' and got almost the same effect (if not better) and it is still smooth. I updated the pen for anyone who wants to play with it.

 

I'll be launching a blog post soon imitating "SplitText" from the greensock AS3 days in Javascript.

 

-- EDIT --

The blog post is ready and it can be found here: http://nightlycoding.com/index.php/2013/02/text-effects-with-timelinemax/

I hope you like it!