Jump to content
Search Community

Search the Community

Showing results for tags 'sprite animation'.

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Forums

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

Product Groups

  • Club GreenSock
  • TransformManager
  • Supercharge

Categories

  • Learning Center
  • Blog

Categories

  • Products
  • Plugins

Categories

  • Examples
  • Showcase

Categories

  • FAQ

Categories

There are no results to display.


Find results in...

Find results that contain...


Date Created

  • Start

    End


Last Updated

  • Start

    End


Filter by number of...

Joined

  • Start

    End


Group


Personal Website


Twitter


CodePen


Company Website


Location


Interests

Found 5 results

  1. Hello! I'm trying to animate a looping sprite sheet as I scroll through a section, using ScrollTrigger. Essentially, like this amazing example by Redis: https://www.redis.agency/. They seem to rely on Lottie, so perhaps using the Lottie Helper for ScrollTrigger would be a better solution? Here are some insights: My sheet is made of 60 frames, and I'm animating the background-position of my sprite element using ScrollTrigger, but would like to control the rest using CSS: position, size and style of the sprite I would love to have some form of control on how much scroll to do for one full completion of the sprite sheet, as the sections I'll be scrolling through can have very different heights I would like the sprite sheet to keep animating for as long as I can scroll within its parent element. The sprites are looping! Ideal solution would be being able to say that a full sprite completion should be X00 VH long and the animation should reset the background position every time it reaches this threshold, and to do so for as long as I can scroll in the parent. Say the parent element is 600vh and I declare a variable of 200vh for a full completion of my sprite sheet; the sprite should be able to loop three times within this parent. I'm very new to GSAP and have been loving the little things I've been able to do so far, but it's seems I've hit a wall and would appreciate any guidance Resources I have tried on the forum: Thank you!! #EDIT: here's an updated codepen where I got the looping part fixed, but the animation loop is way too fast and I can't seem to control that: https://codepen.io/thomasbosc/pen/oNadjRO
  2. Hi Guys, Thanks for this awesome gsap lib again. I'm still learning it but the library is really powerful and quite fun to explore. I need some help with the animation where my container gets pinned on screen and then the image is horizontally moved with the scrolling. This part works fine in the codepen above. What I need with this is for the text in the adjacent container to smoothly show hide along with this image movement. Obviously the number of texts will be the same as the image movements so that wont be a problem. Thanks for any help in advance.
  3. Hi There, I am not quite sure why the following code which simply repeats a timeline that plays a animated sprite twice works fine: TL = new TimelineMax({repeat:1}); TL.stop(); TL.set([spriteSheet], {x:0}); TL.play(); TL.addLabel("f1", "0") TL.to(spriteContainer, .1, {autoAlpha:1, ease:Sine.easeInOut}, "f1+=0"); TL.to(spriteSheet, 1.5, {x:-(spriteWidth * spriteCopyFrame),ease:SteppedEase.config(spriteCopyFrame)}); but if I add another tween after the sprite stepped ease animation, the sprite is not reanimated on the repeat but the new tween is animated twice as per the repeat:1 TL = new TimelineMax({repeat:1}); TL.stop(); TL.set([spriteSheet], {x:0}); TL.play(); TL.addLabel("f1", "0") TL.to(spriteContainer, .1, {autoAlpha:1, ease:Sine.easeInOut}, "f1+=0"); TL.to(spriteSheet, 1.5, {x:-(spriteWidth * spriteCopyFrame),ease:SteppedEase.config(spriteCopyFrame)}); TL.to(beam, .5, {autoAlpha:.8, y:80, x:-35, scaleX:.35, scaleY:.35, ease:Sine.easeOut}, "f1+=1.9"); Ive tried resetting the the sprites x position with different methods but still it will not replay and seems to always hold on the first frame. Any help appreciated as Ive spent a few hours trying different solutions without success
  4. Hi everyone, I'm trying to get a TimelineMax sprite animation of an SVG-Background to play while throwing the container. Basically, I was planning on using "getVelocity" with "onThrowUpdate" to trigger the playing of the timeline/the movement of the background-image from the start position to the end position (which is calculated via a function), if progress of the timeline = 0. Unfortunately, I can't make it work properly. At first, the timeline/sprite-animation started only after the throw-movement had stopped. Now, in the codepen, the animation isn't working at all – I figured out, that it has to do with the "backgroundPosition: getClip(9, 4)" in the second "fromTo"-Tween of the timeline, but I can't figure out why. What am I missing out? Any help is very much appreciated!!! THX!
  5. Hello, I have a frame by frame (sprite) animation that I am trying to create that has a total of 24 frames, but because it's rather large (as far as width/height) I have to break it up into multiple files so it doesn't exceed some mobile devices max widths. I am just trying to make one sprite sheet play, using the SteppedEase functionality, then hide that div, show the next, etc. For some reason the image is not playing out as it should when combined with the multiple sprite sheets, but it does play correctly when it's by itself. I created this in codepen, so hopefully it's pretty clear. (I also included the 3 image files that are part of the animation so the overall movement is pretty clear). Any help would be greatly appreciated. And, if there is a way to preload the images somehow, that would be super helpful as well. Thanks very much in advance, Jenny
×
×
  • Create New...