This is a read-only archive of the Framer Community on Facebook.

What is Framer? Join the Community
Return to index
Jordan Robert Dobson
Posted Nov 10 - Read on Facebook

MODULE: Sprite Animation Layer

Demo: http://jrdn.io/3I0L0G1W3B2L

I had a few requests for this module today so I decided to post it up on http://framerCo.de

This module helps you do a sprite sheet animation. You just have to provide the image, a single sprite size, sprite step count and the speed to step through the sprite.

Setup looks like this:

sprite = new SpriteAnimationLayer
 width: 70
 height: 100
 steps: 4
 speed: 0.1
 stepsImage: “images/sprite.png”

The methods you can call on the layer are:
 • sprite.play()
 • sprite.playOnce()
 • sprite.pause()

By default, calling .play() will continue to loop until you call .pause() on the sprite. If you only want to play once then use the .playOnce() method. The .pause() method will pause both of the .play() and .playOnce() methods.

Framer Studio Source Simple Example:
 http://jrdn.io/3Z2T1x2r2g2Q

Framer Studio Source Advanced Example:
 http://jrdn.io/3I0L0G1W3B2L

Module:
 http://jrdn.io/code/0E2g3D2l2T12

I hope this works well for you. Let me know if you find any issues or have any ideas on how it could be better.

Thanks and Enjoy!

14 Comments

Chuck Bergeron

Great stuff!

Stephen Crowley

Just going to combine the sound effects :)

Guillermo Romero Jr

woohoo!!!!!

Guillermo Romero Jr

I'm so using this

Jordan Robert Dobson

I tried to get that cheesy fade in scroll down animation you always see on the those old video games. :D

Marc Krenn

Thought about posting another genius "next version" comment with a photo of a Street Fighter II Arcade machine.

But that would have been too easy.

Also, I don't want to be known as the "next version" guy :P

Ash Adamson

Wow, half expected the "uh!" And "ah!" Sounds from Ryu. Lol

Min-Sang Choi

this is so cool

Andreas Mitschke

Sick shit jordan 👍

Josh Puckett

P good 👌

Daniel Nisttahuz

Awesome :-)

Jonathan Lazarini

That's awesome Jordan 😆

Marc Krenn

Did anyone ask for a virtual analog stick? No? Well, too bad, I did it anyway :D

(doesn't work 100% all of the time, though)

gif/html5v: http://gph.is/1HloIUj
demo: http://bit.ly/SF2AnalogStick

(gotta love giphy's flash-fallback player...)

Javier Chávarri

is this the beginning of a FramerJS fork for games?? just saying 😁

Read the entire post on Facebook