Jump to content
GreenSock

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

Blending Animations (ie walk, jump, idle)

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

It's quite difficult to understand the situation you're trying to describe there. Please consider providing a reduced demo in Codepen that demonstrates the issue.

Link to comment
Share on other sites

Sorry about that. :) Here's a CodePen: 

See the Pen pvjwyL by anon (@anon) on CodePen

 

I would like to be able to seamlessly cycle between animations. Instead when you click any of these, it jumps to the start position, rather than playing from where it is. Thanks!

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 :

 

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

 

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

Sorry I was being so confusing! Diaco, I'm pretty sure that's just what I needed. Thanks! 

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.
×