Jump to content
GreenSock

nKinso

Sprite sheet animated by slider

Recommended Posts

Hello,

 

I would like to control a video frame by frame via a slider. As It is a short video, my idea was to embed it in a sprite sheet and then move it along a slider.

My Sprite sheet is 11*10 and the size of each 300x250.

I found this great CodePen: 

Which basically do what I am looking for (just need to add a slider rather than a mouse drag and it is all good)

However, The sprite sheet used was on 1 line only and I cannot do that as I would end up with a 31000px jpeg, which I guess is not good.

How can I modify the code pen to force the sprite to go to the line every 10*300px?

Sorry if it is a little bit confusing, I am not familiar with JS, I just want to show the front end, the type of animation I am looking for.

Cheers

Nico

See the Pen Cvidl by astrogastro (@astrogastro) on CodePen

  • Like 1
Link to comment
Share on other sites

Here is a basic example of using a grid-based spritesheet with rows and columns

 

http://codepen.io/GreenSock/pen/NqWqzQ/?editors=001

 

The firs example in this demo: http://codepen.io/jamiejefferson/pen/aJcGl toggles the visibility of separate images. Might be worth looking into if you don't every frame in one big massive image.

  • Like 2
Link to comment
Share on other sites

This is awesome, Thanks you very much Carl

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