Jump to content
Search Community

Spritesheet Animation: Stepped Ease

dada78 test
Moderator Tag

Go to solution Solved by dada78,

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 followed the stepped ease examples from other topics but can't get this to work.

 

I created a sprite that contains the word "golden" which is being filled with smoke mimicking a masked animation.

Each image in the sprite is 160px wide. The entire sprite is 4960px wide. I then divided the width of the sprite by the width of the div (160px) and used that as the stepped configuration. The word however doesn't appear correctly.

See the Pen 1cc5ab55c15cc9ad661f759d228c3dd9 by dada78 (@dada78) on CodePen

Link to comment
Share on other sites

  • Solution

I figured it out! In case someone has the same issue and uses Texturepacker for generating sprites:

 

In the settings the Trim mode should be set to "None": Sprites > Trim mode > None. This setting outputs the exact sprite I needed in order for the stepped Ease to work. Also make sure to input a fixed size width, based on the amount of images you have. In my case that would be 31 (images) multiplied by 160 (width of div) = Fixed width: 4960px. 

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