Jump to content
Search Community

Stepped Tween of Sprite "AS3 MovieClip style"

Guest Bricks4ever
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Guest Bricks4ever



I am trying to obtain to things with a spritesheet:

  1. Creating a fluid frame by frame animation using TimelineMax together with SteppedEase to tween css backgroundPosition
  2. At the same time being able to programatically access the different "frames" in the animation like gotoAndStop in AS3 (see the input range in the pen)

I have obtained the 2 things in the codepen but I can't help thinking I am doing it the wrong way or at least overengineering it by calculating the individual "frame"'s time position. Is there a more straightforward way to solve my 2 problems? I am thinking in some kind of addframe functionality on a timeline.


Thank you!

See the Pen VLWvQx by klausgrundahl (@klausgrundahl) on CodePen

Link to comment
Share on other sites

Thanks for the demo. Very nice.


First, I think what you have done already is perfectly fine. I would strongly recommend using steppedEase for simple spritesheet animations most of the time.

And nothing was really over-engineered from what I could see.


The only minor optimization I would suggest is combining your seek() and pause() like


can be


Most of the control methods take a from parameter so you can do things like

play(1) // play from 1 second
reverse(3) // reverse from 3 seconds
play(-1) // play from 1 second before the end of the timeline

I'm not sure I understand exactly what you mean by addFrame, but an alternate approach to using SteppedEase is to create a loop that inserts a series of set()s (tweens with no duration). One advantage here is that you can more easily accommodate a spritesheet that is a grid or rows and columns. Another is that it would make it easy to insert frame labels so you could easily:


  1. navigate to frame1
  2. place a callback at frame6
  3. tween from frame2 to frame3 tl.tweenFromTo("frame2", "frame6"); // TimelineMax only
  4. add another tween or timeline at frame7

That sort of stuff. 

for(var i = 0; i < steps; i++){
    var frame = "frame" + i;  
    animationTL.set($eye, {backgroundPosition: '-' + width * (i) + 'px -0px'}, i * secondsPerFrame);
    animationTL.add("frame" + i)
    //just for show. generate buttons to jump to each frame of the animation
    var newBTN = $('<button id="' + frame + '">' + frame + '</button>').appendTo("#nav");
  $("#btn").on("click", function(e) {

   $frameRange.on('input', function(){  
     animationTL.pause("frame" + this.value);
    animationTL.tweenFromTo("frame7", "frame3")

Check out this demo: http://codepen.io/GreenSock/pen/MwoeXy?editors=001


Again, what you did was really fine.

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