Jump to content

Search In
  • More options...
Find results that contain...
Find results in...
Amitesh Ghate

Animate image sequence loaded through PreloadJs

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 all


I have loaded image sequence using preloadJS and stored it in an array and now I want to run an animation using TweenMax and TimelineMax in a particular DIV. I am not getting how to apply tween to the DIV using these available images. I also expect that I can able to control the animation later on by using slider, using play pause buttons or some other external events if required in future.  

Link to comment
Share on other sites

Hi and welcome to the GreenSock Forums.


What exactly you want to do with the images?, put them in a vertical/horizontal line?, stack them inside the div element?. You want to control the position, rotation, opacity, display, visibility?. Are you having problem with "when" to start the tweens?, in this last case check for some callback using PreloadJS, I'm pretty sure there must be one.


As you see there are lots of options and with the information you provide is almost impossible to know what's the issue you're experiencing and what could be the best solution.


Please read this post in order to create a reduced sample of your code:





  • Like 2
Link to comment
Share on other sites

Hi rhernando


I have array of images and I want to play an animation using these images. This can be achieved by adding all those images in the div either horizontally or vertically and apply tween to change position so that we can get animation like effect or stack them all in single div and control its visibility. I just want to know how to achieve the same using Greensock

Link to comment
Share on other sites



This is a very simple example of an infinite slider using images. 


Feel free to fork and adapt it to your scenario so we can see with better detail what's your current issue and the best way to solve it:


See the Pen AzHpy?editors=101 by rhernando (@rhernando) on CodePen



Link to comment
Share on other sites

1st of all I am sorry because I am not able to put my question clearly as I am new to use Greensock, below is my code snippet. I hope it will give some more clarity.




<div id="mainContainer">

        <div id="imageContainer">          





 var queue = new createjs.LoadQueue(false);

 var image = new Array();

 var t1;


 queue.on("fileload", handleFileLoad, this);

 queue.on("complete", handleComplete, this);


$(window).on('load', function() {

queue.loadManifest( [{id:"image1", src:"assets/image1.png"}, {id:"image2", src:"assets/image2.png"}, {id:"image3", src:"assets/image3.png"}] ); // here i am giving N no of images for preloading, for now given only 3 images

tl = new TimelineMax({repeat:-1});





function handleFileLoad(event) {

     var item = event.item; // A reference to the item that was passed in to the LoadQueue

     var type = item.type;


     // Add images to the div.

     if (type == createjs.LoadQueue.IMAGE) {

image.push(event.result)// array of images if required in future

     $("#mainContainer").find("#imageContainer").append(event.result);// here i am creating vertical filmstip which i want to use to get animation effect

tl.add(TweenMax.to($("#mainContainer").find("#imageContainer"), 1, {y:200}));//here i want to create vertical tween so that i can achieve animation




  function handleComplete() {




    // here loading is complete and want to start playing animation



Link to comment
Share on other sites



The code clarifies a little your issue, but is always better to post a reduced live sample on Codepen.


First some pointers regarding jQuery selectors. Since the element you want to hide/show has a unique ID there's no need to use the find() method on the parent or main container, just select the element directly. Also you can use GSAP to hide/show your element. Using jQuery's hide/show is like having a formula1 car parked in your house and going to a race track in an electric city-car, better use the F1. You can use a set instance (which is equivalent to a zero duration tween) to set the visibility and opacity of the element, like this:

//pass the element's ID directly
// the following is GSAP equivalent to hide()
TweenLite.set("#imageContainer", {autoAlpha:0});

// then to show the element
TweenLite.set("#imageContainer", {autoAlpha:1});

Finally to start the timeline, first is a good recommendation for this cases to create the timeline paused and then in PreloadJS callback use the play() method, like this:

// create the timeline paused
var tl = new TimelineMax({repeat:-1, paused:true});

// then call the complete handler
 function handleComplete() {
    TweenLite.set("#imageContainer", {autoAlpha;1})

Also I've never used CreateJS, so I don't know if there are any errors in your code. What you could do is attach some console.log calls in your code to see how it progresses and to check that the callbacks are being triggered, alerts are not good for this because code keeps executing after the alert has been triggered. In order to check that you can use Chrome's dev tools using the F12 key.


Finally I recommend to check this post in order to learn how to create a live reduced sample:





  • Like 2
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.