Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
WarenGonzaga

How to animate smoothly this set of pictures looping.

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

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.

Share this post


Link to post
Share on other sites

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.

  • Like 2

Share this post


Link to post
Share on other sites

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:

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

  • Like 2

Share this post


Link to post
Share on other sites

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.  

Share this post


Link to post
Share on other sites

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!

Share this post


Link to post
Share on other sites

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:

char.pngThe 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.

Share this post


Link to post
Share on other sites

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..

Share this post


Link to post
Share on other sites

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/

 

:)

  • Like 1

Share this post


Link to post
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

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. 


  • Recently Browsing   0 members

    No registered users viewing this page.

×