Feature request: animation events

[BorisChumichev]

It would be great to implement events like this:

<TypeAnimation
    onSequenceStepEnd={(sequence: Sequence, sequenceIdx: number) => {
    // make something when animation sequence step completes
    }
    onSequenceEnd={(sequence: Sequence) => {
    // make something when entire animation sequence ends
    }
} />

Use case: In my project, I have a cyclic animation of search terms rotating in mock search input. The animation of search term rotation implemented with TypeAnimation component. After each search term change, I change the content below the input. Since there is no way to hook into animation events, I had to implement this behavior with setTimeouts which I had to calculate by summing the animation durations based on typing speed, terms character lengths, and delays in the sequence. The solution turned out quite verbose and does not always perfectly align with the animation timing.

[maxeth]

Hey,

couldn't you just use callback functions inside the sequence like this?:

sequence={["step1", () => console.log("onSequenceStepEnd1"), 1000, "step2", () => console.log("onSequenceEnd")]}

Maybe I'm not getting your use case correctly. It's hard to comprehend without a specific code snippet.

In what way do the specific callback props you suggest differ from callbacks placed inside the sequence?

[BorisChumichev]

@maxeth that's perfect. Thank you. Callbacks in sequence do exactly what I need. Didn't know one can pass any callback function there.