Jump to content

SteppedEase to animate sprite with columns and rows

Recommended Posts

I am using stepped ease to animate a sprite and it works fine.

The problem i have is that there are so many frames that strip is now too wide and I need to have a grid of rows and columns of images

Is there a way of animating the y position incrementally as well the x position using the following:


TL.to(spriteSheet, 4, {x:-(spriteWidth * spriteNoOfFrames),ease:SteppedEase.config(spriteNoOfFrames)},"f1+=2.5" );


Thanks in advance... I really would love to use stepped ease since its so slimline compared with other js sprite animation code.

Share this post

Link to post
Share on other sites

For a grid you will most likely have to loop through each row and create a new SteppedEase tween and increment the y value OR just use a set() to put the background where you need it.


Here is one we had laying around:


See the Pen NqWqzQ?editors=001 by GreenSock (@GreenSock) on CodePen


and another from sesamechee


See the Pen pyqWBp?editors=0010 by sesamechee (@sesamechee) on CodePen





  • Like 3

Share this post

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    No registered users viewing this page.