Jump to content

Search In
  • More options...
Find results that contain...
Find results in...

Search the Community

Showing results for tags 'sprite'.

  • 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 16 results

  1. Hi, I would like to create a scroll controlled animation with loop points along the way at key sections. I am currently animating sprites using GSAP SteppedEase functionality to trigger animated sprites frame by frame via ScrollMagic (in Vue.js). This is working fine for one animation, however I would like to sequence multiple animations and add looped animations that auto run until the user scrolls again then start another animation / tween etc. So it would look something like this: Intro sprite animation sequence (linear) Scroll scroll
  2. Hi! I have seen many tutorials showing tween animation on objects. However, I want to know if it's possible to animate cells of a spritesheet too using GSAP ? Like how it's done in other frameworks. I am doubtful about this, since spritesheet are probably canvas-only feature. So, if not, is their any alternative to animate images in sequence through GSAP ?
  3. Hi there! I am making a png spritesheet animation. I have an animation existing of 7 frames which I want to animate back-and-forth. So: from frame 1 to frame 7 back to frame 1 again and back. Example: 1,2,3,4,5,6,7,6,5,4,3,2,1,2,3 etc. I tried reversing with "yoyo:true" but i cant quite get a seamless experience as you can see from the Codepen. The animation goes back to frame 1 before getting into yoyo. I would love some advice from you. Any advice would be appreciated!
  4. Hi everybody, I'll start by saying that Greensock is amazing and I love it Also, great forum! Already found a few solutions by going through some of the threads here. I'm trying to make a character walk on a path when the page scroll reach certain points. After a few tries, I went forward with the following solution: 1. animate the character on each path using top left with percentage so that the horizontal roads can be responsive 2. this way, I can create the entire animation from the start, and just forward the animation to the correct posit
  5. Hi Guys, I have a bit of a conundrum so I thought I would put it past the experts! I have a video sequence that has been exported as 300+ png's, some coming in at 300kb. I'm looking for the most optimised method to animate the sequence. I'm already using GSAP in this project however I'm not sure it would be best suited. I was thinking an image replacement method but its an awful lot of calls and combining them into a sprite will create a huge file. Thanks Wes
  6. Hi, I'm a novice when it come to this stuff but I've recently set up a holding page for a friend of mine and she wanted a video on it. However I found out that a video is no good in iOS devices as it starts off paused, and you have to click to play it. Therefore I started browsing the net to find a solution, which seemed to be to turn the video into an image sequence. Thats when I found this example codepen http://codepen.io/jamiejefferson/pen/aJcGl So I used the Javascript and bits of the CSS to create my code http://codepen.io/anon/pen/pgrQZO . However as you can see it i
  7. 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.
  8. Hi im trying to do animate a animated sprite trough a bezierpath controlled via scrollmagic. so far i managed to separate the problems in 2 : - the bezierpath is applied to the sprite container => works fine - the sprite animation is applied to the sprite itself => does not work fine EDIT: http://design-voilaah.com/mnd/app/ for the sprite control, my code is var controller = new ScrollMagic.Controller(); var scene = new ScrollMagic.Scene({triggerElement: "#trigger", duration: 500, offset: 100}) .setTween(sideSpriteTween) .addIndicators() /
  9. Hi, I am trying to make a navigation for a website using sprite animations. Each button should play once on hover, and then reverse when unhovered. I came across this pen from another thread here that was close to what I needed: http://codepen.io/klausgrundahl/pen/VLWvQx And made some changes so that there were multiple images: http://codepen.io/anon/pen/jbXjNe (in reality I want each one to have its own background sprite, but for the sake of this I just made them different background colours) How can I make it so that when I hover one of them, only that particular one moves, n
  10. Hi everyone, hope you are fine ! I come today with a new question about tweenmax. I have a earth to make rotate while the user is scrolling (position fixed). Then the earth has to transform in an other item. Well, after some research on your forum I discovered that you can have something fluent and nice with sprite sheets. and this function : TweenMax.to(obj, 0.2, {x: "-=1194px", ease:SteppedEase.config(3)}); Sooo I have 20 images in my sprite for a width of 7960px. The thing is, when I am rotating while scrolling, I can't do something like : x: "+= scrolling value". If
  11. 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 w
  12. Hi guys! Can I animate a sprite in Phaser with GSAP? I want to animate the sprite in the timeline because I want to be able to reverse it with everything else... In Phaser I animate the sprite as follows: var player = this.game.add.sprite(X, Y, 'player'); player.animations.add('walk', [0, 1, 2, 3, 4 ], 15, false); //the animation end in the frame 4 player.animations.play('walk'); And I am using GSAP to tweening objects... var tl = new TimelineLite(); tl.to(this.state1, 3, { x: -1000 }); I want to replace the sprite animation with Phaser to do this with GSAP, and to reverse this
  13. How to animate a sprite images in canvas using GSAP as in this tutorial is shown?
  14. Hi there, I was wondering if there was a way to used SteppedEase to animate a DOM element with a background image as a sprite where the background image has multiple rows of frames. See attachment for example. Ideally for the attached example I'd like it to animate row 1 from frames 1-4, then row 2 from frames 1-4, then reset and repeat. Is this possible with SteppedEase? If so can someone point me in the right direction? Thanks!
  15. Hello, I was wondering if someone had any success of animating a set of images (known also as sprite sheets). I was thinking that animating the css property background-position, and maybe adding some autoAlpha would do the trick. I will probably try and implement something of sorts unless someone has already beaten me to it, so there is no need to re-invent the wheel... looking forward for reading some ideas on the matter... EDIT: Something quick and dirty is the following: var t1 = new TimelineMax({delay:0, repeat:-1, repeatDelay:0}); t1.to($("#spriteContainer"),0.0
  16. Hello. Say you create a sprite and are using a BlitMask on that sprite: private var scrollerSprite:Sprite = new Sprite(); private var scrollerBlit:BlitMask; scrollerBlit = new BlitMask(scrollerSprite, 0, 0, scrollerWidth, scrollerHeight, true, true, 0x000000); scrollerBlit.wrap = true; All happy. Now, let's say later on you need to add children to scrollerSprite: scrollerSprite.addChild(Item); That item will not appear for me, it's being masked by the BlitMask. How can I resolve this? I'm updating the mask after adding the child, but this makes no differen