Jump to content
GreenSock

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

animation with images

Go to solution Solved by Diaco,

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,

 

I have a set of 60 images. These images are the contentious images if we open then it looks like an video.  

So I want to show these images on browsers one by one continuously by keeping some time span like 2-3 sec between showing these images.

When these images will open or come on browser it should looks like a video.

How to achieve this one with GSAP. 

 

Link to comment
Share on other sites

  • Solution

Hi khatkolekomal :)

 

try this :
preload your images , change your src attr with one Tween and easily control that  :
var anim = {frame:0} ;
TweenMax.to(anim , 2 , {frame:"+=60", roundProps:"frame", onUpdate:updateHandler });

function updateHandler() {
image.attr("src", "images/character"+anim.frame+".png");
}

with this method you don't need extra DOM objects .

... :)
  • Like 4
Link to comment
Share on other sites

Hello 

 

Could you please elaborate above snippet of code more explicitly. 

As i couldn't upload all images, as you did in updateHandler().

  •  
Link to comment
Share on other sites

Glad Ancient Warrior was able to offer you a suitable solution that has the advantage of limiting the number of DOM elements.

 

Just for reference, it could be helpful to take a peek at JamieJefferson's demo here: http://codepen.io/jamiejefferson/pen/aJcGl

 

Its a very intelligent approach that automatically detects if an element contains

  • mutliple images that need to have their visibility toggled
  • a single horizontal spritesheet
  • a single vertical spritesheet

It might come in handy some day.

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