Jump to content


Is tweening an array of images possible?

Moderator Tag

Recommended Posts

Hi folks,


I have a job where the client has a screen with 64 little icons on it, actually 6 different icons spaced to make a grid pattern of 64. So it looks like 8 x 8 rows x columns of icons. What they want to show is these icons appearing on the page over time, so one appears, then another then more and more getting faster and faster so that all 64 are there after a few seconds.

Now I know I could manually write the tweens to go from off the screen in the z axis (so behind us) to the final position, for each and every icon, but that would take hours. Can anyone think of a cool quick(ish) way of doing this, perhaps with TimeLine or something? I'd like them to look like they are whizzing onto the screen from behind the camera, if you see what I mean. Bearing in mind that they must end up in the correct positions in the grid. Personally I'm stuck. I just can't think of a way other than laboriously tweening each one.


I'm a club greensock member so have access to those plug-ins too should they help.


Many thanks


Link to comment
Share on other sites

Sure, you could either use the TweenMax.allFrom() method or do a loop and create each tween. Either way, you'll need to have an array with all your images in it. Like:


TweenMax.allFrom(myImagesArray, 1, {z:-1000}, 0.1);


That'll make all the images tween in from a z position of -1000 and stagger the start times by 0.1 seconds. If you want the stagger time to shift over time so that things fly on faster and faster, you could just put the tweens into a TimelineLite, pause it, and then tween its currentTime property and ease that tween, kinda like:


var tl:TimelineLite = new TimelineLite({paused:true});
tl.insertMultiple( TweenMax.allFrom(myImagesArray, 1, {z:-1000}, 0.1) );
TweenLite.to(tl, tl.duration, {currentTime:tl.duration, ease:Strong.easeIn});


Does that help?

Link to comment
Share on other sites

Genius! Thanks Jack. That's exactly what I needed and will save hours. I couldn't get my head around the staggering and didn't even think of easing a time property.




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.