Jump to content
Search Community

CrossFade of massive sequence of PNG

blue-infinity test
Moderator Tag

Go to solution Solved by Rodrigo,

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



I would like to animate a sequence PNG (300 images) with a really quick crossfade transition between image switch to emulate a movie effect.

I've tried multiple ways to achieve it (Timeline and Stagger).

There is always a blink between images. Is it a performance issue or am I missing something with my timings ?

TweenMax.staggerFromTo($('.video-transparent__img', view.root),.1, {css:{alpha:0}, ease:Linear.easeNone}, {css:{alpha:1}, repeat:1, yoyo:true, repeatDelay:.05, ease:Linear.easeNone}, .1);

Is it the right way to achieve it or is there another ?



Link to comment
Share on other sites

  • Solution

Hi and welcome to the GreenSock forums.


Mhh... without a live sample (which I understand can be hard to set up due to the images amount) it's a bit hard to pinpoint the problem.


What comes to my mind first is the amount of images. Then are those images being preloaded?, Do those images have some sort of shadow or alpha channel? that can be a performance issue. Basically if you're adding 300 <img> tags that could be a problem.


Finally, considering what you're after, perhaps you could set up a sprite sheet. I know it sounds a bit daunting but you could create a TimelineMax, that keeps repeating and use a call() method to change the background position of just one element (that's far easier for the browser in terms of rendering and reduces the amount of DOM elements as well, which is also desirable now a days). Something like this:

var targetEl = document.getElementById("element"),
    currentPosition = 1,
    spriteLength = 300, // in this case there are 300 images in the sprite
    spritePosition = {"left":0, "top":0},
    tl = new TimelineMax({repeat:-1});

  .to(targetEl, 0.1, {autoAlpha:0, ease:Linear.easeNone}
  .addPause()// use add pause to stop the animation while the code is executed, just a precaution
  .to(targetEl, 0.1, {autoAlpha:1, ease:Linear.easeNone});

function changePosition(){

  // increase to the next position
  if(currentPosition < spriteLength) {
  } else {
    currentPosition = 0;

  // here you need to do some math in order to set the proper position of the background and appy it to the spritePosition object

  TweenLite.set(targetEl, {backgroundPosition:spritePosition.left + "px " + spritePosition.top + "px"});



As I wrote the code above I thought about a better approach. Instead of creating a code that executes every time use a for loop to set up one timeline and repeat that:

var targetEl = document.getElementById("element"),
    spriteLength = 300, // in this case there are 300 images in the sprite
    spritePosition = {"left":0, "top":0},
    tl = new TimelineMax({repeat:-1, paused:true});

for(var i = 0, i < spriteLength; i++){

  // here you do the math to set up the left/top position of the background

  // then add the instances to the timeline
    .to(targetEl, 0.1, {autoAlpha:0, ease:Linear.easeNone})
    .set(targetEl, {backgroundPosition:spritePosition.left + "px " + spritePosition.top + "px"})
    .to(targetEl, 0.1, {autoAlpha:1, ease:Linear.easeNone});

// finally start the timeline

Yet another option would be to create an array and store the positions in it using a loop, like in the second code and then use the call() method of the first code I posted to change the background's position. In this case perhaps the addPause() method could be unnecessary.



  • Like 3
Link to comment
Share on other sites

As Rodrigo offered, my hunch is that you are running into a rendering bottle-neck in the browser and its nothing related to GSAP's efficiency at manipulating the opacity values.


There are handful of ways to handle displaying a series of images. Not really sure how important that cross-fade is, but I would try removing it just to see if its any better. 


Here are 2 great examples by Jamie that show how to handle animating spritesheets:





here are some approaches that are very similar to Rodrigo's excellent suggestions too:



In summary, there are a lot of ways to approach this but we can't do much without a demo.

Even if you provide an example with 10 or 20 images it will give us a much better chance of helping you come to a solution that suits your particular needs.


Best way to provide demo: http://greensock.com/forums/topic/9002-read-this-first-how-to-create-a-codepen-demo/


Rodrigo, Great to have you back!

  • Like 1
Link to comment
Share on other sites

Wow, such a quick support!

I really want to keep the crossfade between images because we remove a lot of frames from the original video so I can't use a spritesheet. It's also very hard to me to show you a use case due to a the amount of images (that's being said I love codepen.io).

Rodrigo found a part of the solution. Since I was on localhost I thought that image loading was instantly but in fact not for such amount + some canvas stuff.

So I try with a time out and it is OK now, there is still a small ghost effect but it is fine.

setTimeout(function () {
var tweenDuration = .2;
var staggerDelay = tweenDuration * 0.5;
TweenMax.staggerFromTo($('.video-transparent__img', view.root), tweenDuration, {css:{alpha:0}, ease:Linear.easeNone}, {css:{alpha:1}, repeat:1, yoyo:true, repeatDelay:.0, ease:Linear.easeNone}, staggerDelay);
}, 5000);

I will preload the images (with LoaderMaxJS maybe one day ?  :mrgreen:)


Thanks a lot for your help everyone.

  • 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.
  • Create New...