How to animate smoothly this set of pictures looping.

[WarenGonzaga]

Hi there guys! can you please help me I am struggling  how to code the animation for it properly with my 4 separated frames images.

I want to animate it smoothly and nicely like normal cyclist.

Here's my code for animating 4 framed images.

 

JavaScript:

window.onload = init;

function init() {
  TweenMax.set("#two, #three, #four", {alpha: 0});
  animationOne();
}

function animationOne() {
  TweenMax.to("#one", 0, {alpha: 0, delay: 1});
  TweenMax.to("#two", 0, {alpha: 1, delay: 1});
  TweenMax.to("#two", 0, {alpha: 0, delay: 1.1});
  TweenMax.to("#three", 0, {alpha: 1, delay: 1.1});
  TweenMax.to("#three", 0, {alpha: 0, delay: 1.2});
  TweenMax.to("#four", 0, {alpha: 1, delay: 1.2});
  TweenMax.set("#one", {alpha: 1, delay: 1.3});
  TweenMax.set("#two, #three, #four", {alpha: 0, delay: 1.3, onComplete: animationTwo});
}

function animationTwo() {
  TweenMax.to("#one", 0, {alpha: 0, delay: 1});
  TweenMax.to("#two", 0, {alpha: 1, delay: 1});
  TweenMax.to("#two", 0, {alpha: 0, delay: 1.1});
  TweenMax.to("#three", 0, {alpha: 1, delay: 1.1});
  TweenMax.to("#three", 0, {alpha: 0, delay: 1.2});
  TweenMax.to("#four", 0, {alpha: 1, delay: 1.2});
}

HTML:

<div id="cyclist">
  <img id="one" src="https://s32.postimg.org/inysw8m2d/wiggins_01.png"/>
  <img id="two" src="https://s32.postimg.org/ip8qpnnw5/wiggins_02.png"/>
  <img id="three" src="https://s32.postimg.org/c0279n2k5/wiggins_03.png"/>
  <img id="four" src="https://s32.postimg.org/j4k0io9th/wiggins_04.png"/>
</div>

CSS:

img {
  position: absolute;
  left: 10px;
  top: 10px;
  bottom: 0;
  right: 0;
}

For full editing please go here: 

See the Pen PzEzag by Waren_Gonzaga (@Waren_Gonzaga) on CodePen.

 

Kindly fork my pen and please revise. It really helps me to figure out how to make a code for this animation.

[ohem]

You should edit your images in Photoshop so that the bike is in the same position in each image.  Currently image 01 and 03 are in the same position, and then for 02 and 04 the bike is further forward which is what's causing that shift back and forth in your pen.

 

Once your images are properly aligned, I would actually recommend combining the images into a sprite sheet.  You can use this generator to do so online: https://draeton.github.io/stitches/

 

You can easily animate sprite sheets with GSAP using SteppedEase.  Here's a great example of that by Diaco: 

See the Pen MYdwRP by MAW (@MAW) on CodePen.

 

 

Depending on your needs though, you could also just create an animated gif in Photoshop since it's such a simple 4 frame animation.

[Carl]

Great suggestion, Ohem. Spritesheets are perfect for this type of animation.

 

Warren, in case you aren't familiar, the secret to Diaco's pen is that all the images are in one image like:

The code just moves the image by a constant amount of pixels each time.

[ryanf15]

Here is a different approach.  

 

See the Pen pbpZvR by rfenik (@rfenik) on CodePen.

 

This won't work as-is, move the images in the same directory and change the "hostname" and "directory" vars.  

[WarenGonzaga]

Here is a different approach.  

 

See the Pen pbpZvR by rfenik (@rfenik) on CodePen.

 

This won't work as-is, move the images in the same directory and change the "hostname" and "directory" vars.  

 

Good try man!

[WarenGonzaga]

Great suggestion, Ohem. Spritesheets are perfect for this type of animation.

 

Warren, in case you aren't familiar, the secret to Diaco's pen is that all the images are in one image like:

The code just moves the image by a constant amount of pixels each time.

 

Hi carl! Thanks! I already saw this animation! I wanna make something like this! But I have only 4 pictures and separated files... This is so challenging... alpha doesn't seem so good to use for animation pictures with 4 different pictures.

[WarenGonzaga]

You should edit your images in Photoshop so that the bike is in the same position in each image.  Currently image 01 and 03 are in the same position, and then for 02 and 04 the bike is further forward which is what's causing that shift back and forth in your pen.

 

Once your images are properly aligned, I would actually recommend combining the images into a sprite sheet.  You can use this generator to do so online: https://draeton.github.io/stitches/

 

You can easily animate sprite sheets with GSAP using SteppedEase.  Here's a great example of that by Diaco: 

See the Pen MYdwRP by MAW (@MAW) on CodePen.

 

 

Depending on your needs though, you could also just create an animated gif in Photoshop since it's such a simple 4 frame animation.

 

Thanks man for reply! I will do your suggestion like on the link you've posted..

[Jonathan]

Hello WarenGonzaga,

 

Here is another spritesheet animation. Like Carl said above all my images are combined into one spritesheet

 

This one is of fire animating.. all one sprite-sheet:

 

See the Pen zrGGmQ by jonathan (@jonathan) on CodePen.

 

Also here is a website for fast sprite-sheet creation like ohem advised above:

 

https://draeton.github.io/stitches/