Search the Community
Showing results for tags 'sprite'.
Found 16 results
-
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 ?
-
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 Animation sprite (loop) Scroll scroll Next animation sequence (linear) Scroll scroll Animation sprite (loop) Scroll scroll Next animation sequence (linear) Scroll scroll Animation sprite (loop) ... End And it all needs to go backwards when scrolling back up the page. Here is a CodePen: https://codepen.io/philnichols/pen/NWKEYrY However I would like the pink and green tweens to loop indefinitely (independently of the scroll ) untill the next scroll marker is reached, then switch back to the linear / scroll controlled tweens. The reason is we would like users to stop scrolling and read some text on the page at certain points but still have an animation looping in the background whilst they do this, until they carry on scrolling again. Do you think this is the correct approach? Thanks in advance for any help.
-
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!
-
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 position (or even backwards) 3. potentially, I can make the animation slower of faster to make the character walk faster (this will effect both the sprite animation and the walking) Now, I'm at a point were the basics work. the character follows your scroll (it feels as if he's trying to catch up with you). Later, I'll add more points across the path to make him walk shorter distances Now, i'm having problems with 3 more things I want to accomplish: 1. make him go faster for bigger distances (if you scroll super fast, he should speed up the animation up to a certain max) 2. try and make the tweenTo function start at the same speed as the current speed (but still speed up and slow down overhaul if that's possible) 3. change the direction of the sprite. currently, on reverse(), the character just walks backwards. I want a way to change the sprite's background position to a "up walk" and "left walk" to make it better. Can this be done only by creating two different animations? I would really appreciate any help trying to fix those problems. I'm kind of stuck at this point, reading all the docs I can find
-
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
-
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 is very glitchy? I've been trying to iron out the flickering but with no luck. Any ideas how to smooth it all out, as I'm really stuck!? Many Thanks in advance for any help! http://greenwich-design.co.uk/clients/guiltydolls/guilty_dolls2/
-
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.
-
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() // add indicators (requires plugin) .on("update", function (e) { // used to control and reverse the sprite when man walking left/right or up/down $cachedCharacter.attr("class", "character " + e.target.controller().info("scrollDirection")); }) .addTo(controller); When i have only one sprite, this man walking left/right, it works fine. when im adding a second sprite to control the man walking up/down, it does not work anymore var scene2 = new ScrollMagic.Scene({triggerElement: "#trigger2", duration: 500}) .setTween(frontSpriteTween) .addIndicators() // add indicators (requires plugin) .on("update", function (e) { $cachedCharacter.attr("class", "character " + e.target.controller().info("scrollDirection")); }) .addTo(controller);
-
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, not all three at once? I don't mind having to give each one separate classes or individual ids. This pen (http://codepen.io/MAW/pen/pjbqvE) achieves part of what I need but the animation way simpler there, and I can't figure out how to combine the two to get what I need... Seems like it should be super simple but my newbie brain can't quite do it. Hope someone can help. Thanks!
-
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 I am not in good proportions the animation is broken. But in the meantime, if I scroll to a maximum position the animation has to be completed before transforming in an other object ! So I decided that each time I scroll, I will send 1194px to x, that correspond to 3 images. But, if you scroll very slowly you won't arrive in the next image's area before the end of spinning animation! Do you have some idea or tips of how I can synchronize tweenmax with a scroll ? I am hesitating about using scroll magic but I am afraid that it will use a huge amount of time to implement / masteries. EDIT: here is a codepen I made. http://codepen.io/anon/pen/VLJWrX
-
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.
-
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 in the timeline animation with tl.reverse(); Thanks in advance PD: See please http://www.html5gamedevs.com/topic/8141-tween-atlas-frame-on-ipad/ Regards, Nicholls
-
How to animate a sprite images in canvas using GSAP as in this tutorial is shown?
-
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!
-
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,{css:{'background-position-x':posX}},0.1); t1.to($("#spriteContainer"),0.0,{css:{'background-position-x':(posX-50)}},0.2); t1.to($("#spriteContainer"),0.0,{css:{'background-position-x':(posX-100)}},0.3); } we have a <div id="spriteContainer"></div> and some css: #spriteContainer{ background:url(fishSprite.png); background-repeat:no-repeat; position:absolute; left:50%; top:200px; width:38px; height:26px; overflow:hidden; } I used this sprite sheet:
-
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 difference. Thanks.
