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. left
or right
. So how do I trigger this animation without changing its state or position?
The answer lies in a few key fundamentals:
1. applyAtStart/applyAtEnd
applyAtStart
andapplyAtEnd
accept 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.
2. poseKey
If
poseKey
changes, 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.
3. spring
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!
Top comments (0)