Jump to content
Search Community

Search the Community

Showing results for tags 'spritesheet'.

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


  • GreenSock Forums
    • GSAP
    • Banner Animation
    • Jobs & Freelance
  • Flash / ActionScript Archive
    • GSAP (Flash)
    • Loading (Flash)
    • TransformManager (Flash)

Product Groups

  • Club GreenSock
  • TransformManager
  • Supercharge


There are no results to display.

Find results in...

Find results that contain...

Date Created

  • Start


Last Updated

  • Start


Filter by number of...


  • Start



Personal Website



Company Website



Found 8 results

  1. 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: http://codepen.io/astrogastro/pen/Cvidl 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
  2. Hello! I didn't find any sprite animation plugin for TweenMax and decide to write my own I hope it will be useful for somebody. Github link Demo here I apologize in advance for the quality of the code, this is my first attempt I will be glad to hear comments and suggestions from GSAP masters and all community.
  3. Hello, I created a single spritesheet that cointains two animations inside it As You can see from this image The last four frames represent the initial animation, while the first ten, represent the second animation (And It starts when I click a play button) What I would achieve is: 1) The first animation (last four frames) start and it loops UNTIL I press the play button 2) Then the second animation start 3) TimelineLite come back to the first animation I tried to obtain this result with two spritesheet but though a single one should be a more elegant solution Thanks in advance for any help
  4. 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.
  5. Hi I am trying to obtain to things with a spritesheet: Creating a fluid frame by frame animation using TimelineMax together with SteppedEase to tween css backgroundPosition At the same time being able to programatically access the different "frames" in the animation like gotoAndStop in AS3 (see the input range in the pen) I have obtained the 2 things in the codepen but I can't help thinking I am doing it the wrong way or at least overengineering it by calculating the individual "frame"'s time position. Is there a more straightforward way to solve my 2 problems? I am thinking in some kind of addframe functionality on a timeline. Thank you!
  6. I had a need for controlling a sprite-sheet, with pause, play, and go-to-frame functionality. Also needed practice creating jQuery plugins. The result is jquery.gsap.sprite.js. Gitub: https://github.com/agrothe/jquery.gsap.sprite Demo: http://jsbin.com/quvuzo/6/edit?html,js,output Sample Usage: var mark = $(".mark").sprite({ frameWidth: 24, frameHeight: 70, sheetWidth: 120, imageSrc:"https://dl.dropboxusercontent.com/u/6801572/marksprite.png" }); // Pause the sprite mark.sprite("pause"); // Play the sprite mark.sprite("play"); // Resume the sprite from where it was paused mark.sprite("resume"); // Restart the sprite from the beginning mark.sprite("restart"); // Stop the sprite mark.sprite("stop"); // Goto first frame (0 indexed) and stop mark.sprite("seek", 0, true); // Goto thrid frame (0 indexed) and stop mark.sprite("seek", 2, true); // Goto thrid frame (0 indexed) and continue mark.sprite("seek", 2); A few advanced features are overrides for TweenMax and TimelineMax libraries, as well as passing in your own Timeline object for maximum control. Comments and suggestions more than welcome.
  7. Hello everybody, First if all, thanks for the amazing animation library! GSAP finally made me switch from actionscript to js (: I want to share a trick how to easily integrate spritesheets into timelines and also have the ability to reuse the sprites on the spritesheet. The page also contains a few codepen links. http://multiplane.tumblr.com/post/78304655871/spritesheets Hopefully this method will be useful to somebody & perhaps somebody will improve this method (:
  • Create New...