You're attempting to create a spring animation either with a <motion />
component or animate()
function and you've received a message that you can only animate a maximum of two keyframes.
Explanation
The very basic technical explanation behind this limitation is that it'd take a little more code to support this and we're not certain it would be worth the overhead.
It's not impossible, and if you would like to see this functionality added, please make a feature request.
The further considerations include the fact that spring animations are physics-based. As a result, an animation like this:
Could fall out of sync in a surprising way as the y
animations complete sooner.
Solution
Change animation type
Multiple keyframes will not use a spring animation by default, so removing type: "spring"
will fix the error.
It's possible to continue using a spring animation for other values by only removing the spring animation on the affected value using transition overrides:
Use multiple animations or sequence
Alternatively, when using animate()
, it's possible to play spring animations subsequently:
Or explicitly sequence them within a single animate()
call: