motion
motion copied to clipboard
motiondivision
[FEATURE] Ability to inject a callback function into an animate sequence
Is your feature request related to a problem? Please describe. Its not straightforward to inject a trigger in the middle of an animate sequence.
Describe the solution you'd like
Ability to inject a callback function into an animate sequence to be able to trigger arbitrary code in the middle of a sequence. eg.,
animate([
[...anim1],
[...anim2],
[() => {
//do something
}, {at: '<'}]
])
Describe alternatives you've considered My animation is on a scroll so I use the scroll the delta to trigger, but its not a great solution.
Additional context Tbh, maybe this is possible but im not sure from reading the docs.
For all animations that you specify in the segments they will be turned into animations with a common sequence duration with keyframes set appropriately. This enables AnimationPlaybackControls but there is no concept of intermediate time. You cannot add OnComplete even though the typescript would suggest otherwise.
The only way that you can have the existing behaviour and onComplete would be for motion to create fake animations ( and for the existing AnimationPlaybackControls to keep the fake animations in sync ).
I needed onComplete so created code that had similar functionality in terms of the timing of the animations but with additional onComplete and transitionEnd for each segment. It also works with zIndex which is not possible with motion ( unless you hack it with z-index ). My code allows for different segments animating the same value - e.g x as long as the segments do not overlap. I use onComplete to kick off the next "x" animation.
Note that the code still requires a little bit of work as the animations are not stopped on unmount.
My problem with this idea has always been what happens when the animation is scrubbed in both directions. I think we'd have to enforce something like
{
forwards: () => {},
backwards: () => {}
}
I would also need the possibility to add a onComplete callback for an Animation-Sequence. Is there any way to achieve something like this in a non-hacky way currently?
