Jump to content

Search In
  • More options...
Find results that contain...
Find results in...

Tweening multiple objects at the same time lag

Recommended Posts



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



Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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!

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