Simple Sprite Sheet, onComplete Pause

[celli]

I am trying to get this sprite sheet to pause at the final 'bottom position' of my PNG. I think the GSAP pause is working, but it's not holding on my final frame to keep the image with the text in the browser. I tried adding an onComplete event to hold the PNG at a specified y position, but I'm not sure what the best solution is...

See the Pen OVoKRG by celli (@celli) on CodePen

[Shaun Gorneau]

You don't need to pause at all ... you're just animating one too many steps and too much on the total height (230px too much).

 

This change should do what you're looking for -

 

See the Pen NqLQMG by sgorneau (@sgorneau) on CodePen

[celli]

Thanks Shaun! That's right, I guess I minus the first step to make that calculation, correct ?

[Shaun Gorneau]

Moving the full height of the image will move it out of the viewport. Imagine that this animation was one frame and 230px high. Moving the image -230px would move it out of the viewport. Two frames at 460px high and moving -460px would also move it out of the viewport. But, in the second example, moving it -230px would make it move to show the second frame in the viewport. So, essentially, to make it work, you use the following:

steps = Math.round( heightOfSprite / heightOfViewport ) - 1
delta = -( heightOfViewport * steps )

[Shaun Gorneau]

Of course, if you don't want to deal with calculations, you can simplify things by putting the image in a position where the first frame requires being animated to (i.e. the first frame is at -230px). This way you're dealing with 1 to 1 values ... height of the sprite is the value of the distance to move and the number of steps is the amount of "frames" in the sprite.

 

See the Pen LVgELd by sgorneau (@sgorneau) on CodePen

[Shaun Gorneau]

One other thing I forgot to mention (and typically forget when focused in so much on a particular issue) is that when doing animations/movement/tweens/etc that result in a message or layout that are fairly essential to the user experience (and any other state would otherwise hinder communication or usability), we should treat these with progressive enhancement.

 

In this case, what if some other JS on the page resulted in an error...prohibiting JS from executing at all? You'd be left with a big, empty area in which the word "Fearless" should be present. I know, I know ... that won't happen But, what if it did?

 

I would take a step back and position (with CSS) the sprite on the page in such a way that the full word "Fearless" is present before anything else happens, then use set() to position it, and then to(). Or don't use a set() and animate from() zero to the intended position.

 

See the Pen pJxvmP by sgorneau (@sgorneau) on CodePen

 (JS commented out to simulate JS not loading...uncomment to see progressive enhancement)