Jump to content
Search Community

Blending Animations (ie walk, jump, idle)

dxc test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

I want to be able to seamlessly jump between different states of the animation. For example, let's say there's a walk, run, sprint, and idle animation (in that order). Let's say I'm running and I want to sprint. I can use play("sprintFrame") and it'll go straight to that label, but then if then if the legs aren't exactly how they should be on that frame, it'll look jumpy. I tried using tweenTo, but it plays all the animations in between. I'm thinking of using a fromTo, but then I'd have to manually get the current size, position, and rotation of everything. That could get ugly. Is there a better way that I'm not thinking of?

 

Thanks for always proving such amazing support for newbs like me!!!

See the Pen raOwYR by MAW (@MAW) on CodePen

Link to comment
Share on other sites

Thanks for the demo, but I'm still a bit unsure of what is the intended behaviour here. Your Codepen is  quite a bit different to what I expected from the original question. There aren't any sprites and it's using three different properties instead of the one I expected for a sprite (backgroundPosition).

 

Which of these (or something different?) matches the behaviour you're after?

  • animation1 is tweening x between 0 and 550
  • animation2 button is pressed when x is at 275
  • animation1 stops
  • animation2 starts and x remains at 275
  • animation1 is tweening x between 0 and 550
  • animation2 button is pressed when x is at 275
  • animation1 completes, bringing x back to 0
  • animation2 starts
  • animation1 is tweening x between 0 and 550
  • animation2 button is pressed when progress is 50% (x is at 275)
  • animation1 stops
  • animation2 starts at 50% progress and x remains at 275
  • animation1 is tweening x between 0 and 550
  • animation2 button is pressed when progress is 50% (x is at 275)
  • animation1 completes, bringing x back to 0
  • animation2 starts at 50% progress
Link to comment
Share on other sites

Hi [ dxc , jamiejefferson ]  :)

 

i think you need a neutral position for character animation .

perhaps there be a better way for that , but i think this can give a clue :

 

 

if you want tween an element svg/div/canvas you need something like my codepen , but if want to using sprite animation , you need bridge animation frames between your character poses .

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.
×
×
  • Create New...