I couldn't find a good how-to for this so thought I'd write one. I'm working on a game and react-pose has been awesome for creating smooth animations between different component states. But what if I want to animate a component that isn't changing state?
Vanilla pose supports this natively, as this aligns closely with the way it's architected:
poser.set('nameOfPose'). On the flipside,
react-pose is built around transitioning between states, e.g.
right. So how do I trigger this animation without changing its state or position?
The answer lies in a few key fundamentals:
applyAtEndaccept style properties to apply either at the start or end of an animation.
Provides an internal memory for the pose allowing for temporary movement. In the case of this
shake animation, this lets us move the element from its initial
x position to start the animation then return it to that same position afterward.
poseKeychanges, it’ll force the posed component to transition to the current pose, even if it hasn’t changed.
The trigger needed to fire the animation; it can be any state variable as long as it's updated when you want the animation to occur.
The transition that does the actual shaking: once moved from its resting position the spring oscillates back and forth.
Putting all of this together:
On each button click the
guesses count will decrement, triggering the
poseKey update to force the
shake pose (even though it's already in that pose). This shifts it to the left and back, but due to the spring it will shake a bit before coming to a stop.
And there you have it! Hopefully someone may find this useful rather than digging through the docs a bit. Stay tuned for the game I'm making that will be using this!