Jump to content

Leeroy J

PNG spritesheets animation

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! I am making a png spritesheet sequence. It is going pretty well but cant quite get a seamless experience as you can see from the Codepen im having a few problems and would love some advice from you Greensock wizards.



1. When the code is loaded the assets are shown for a split second before the code hides them. is there a way to have these assets hidden on load?


2. I am using a quick fade in/fade out between png sequences which seems a bit clunky is there a way to make a more seamless transition.


3. Why is my second PNG sequence half transparent haha?!


4. Bonus points here but I would like for the still image to display until the spritesheets are all loaded.


I know its quite a big question but any advice would be appreciated. 



See the Pen KrqrGR by LeeArmitstead (@LeeArmitstead) on CodePen

Link to comment
Share on other sites

Hi and welcome to the GreenSock forums,


Thanks for the demo.


To avoid seeing any images before any images load you can put them all in some container div and set that div's visibility to hidden in the css. When the JS runs you set the visibility to visible.

Here I just used <body>




As for your other questions, I'm not quite sure. You have 2 sequences with 60 images (i'm guessing from the steps in the config). Not sure how I'm supposed to know when one sequence ends and the other begins. Perhaps you could simplify it or make it more clear when one sequence ends and the other begins. I'm not really sure what sequence 1 and sequence 2 look like. The images are 21,000 pixels wide which is really big. For the demo make them 300x300 and maybe each sequence has only 4 frames and they have there own color. Sequence 1, blue background, Sequence 2 red. Something like that.

  • Like 2
Link to comment
Share on other sites

Also, I'm having trouble understanding why the start of sequence is configured to fade everything out.

I'm guessing this is where some of the unwanted flashing and stuff is happening.


It sounds to me like you would want animate each sprite1 and sprite2 fading out after they are done playing... not before.

Link to comment
Share on other sites

Hey Carl, I took your advice and hid the divs with CSS which has made the inital load work correctly and the transitions better as well.



See the Pen pbwpjx by LeeArmitstead (@LeeArmitstead) on CodePen


I wanted to have one superlong PNG sequence but found Firefox blocks images over 32,000px wide. Hense the 2 spritesheets.


Is there a method to play only once the content is loaded?

  • Like 1
Link to comment
Share on other sites

This is awesome! using sprites with GSAP!

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