Play in reverse on stop
If you are not familiar with the concept of middleware, make sure to check the middlewares explanation. Also, make sure that you are familiar with the Actions concept.
There are cases in which your in and out animations are the same (symmetrical). It can be time-consuming and boring to perfectly match in and out animations - you need to double the number of keyframes to achieve the result.
Luckily, Loopic can help us here. We can tell Loopic to just reverse the playback of the template when it is time to stop the template.
Prerequisites
For this example, you'll need one Composition with the in-animation. When you are done with the animating process, add a new Stop and outro keyframe on the last frame of the Composition.
Adding new stop middleware
Once we have our animation ready, we'll need to tell Loopic what to do when the template receives the stop command. For that, we will write custom middleware in the Composition action and link it to Loopic using the useOnStop method.
loopic.useOnStop((next) => {
// Middleware code
});
Remember that the default stop middleware will play the animation forward from the frame marked as the outro frame. Now we want to override this behavior by telling Loopic to play Composition in reverse and omitting the call of the next function received as an argument in the middleware.
Since this code is written inside the Composition action (and the same would be if it was the Frame action), we can access the current Composition by referencing this. The Composition has play method which can optionally receive an argument object, and that object contains the reverse property, which defaults to false - and we will set it to true.
this.play({ reverse: true });
Final middleware
Our final middleware should look like this.
loopic.useOnStop((next) => {
this.play({ reverse: true });
});