Documentation request: How do you freeze an animation/timeline on the last frame?

[DanKaplanSES]

This is for V3.

Imagine a site with a submit button that fades into view. It uses animejs to do this. I want to write an automated test for this page, but I don't want this test to wait for the button to appear. Here's how I think I should solve this problem: In test mode, freeze the animation on the last frame. How do I achieve this?

The solution needs to work with animejs timelines and individual animations. I'd like this answer to be officially documented somewhere because, as you'll see below, there are many ways this could be done, but the ones I've found have trade offs. I'm hoping there's an approach with no/less trade offs.

---

Here is what I've tried:

1. animejs has an autoplay property that can be set to false, but this freezes the animation at the beginning, not the end. In the "button fades in" scenario, this would mean the submit button never appears, effectively making it unclickable.

2. Given that issue, the most obvious solution (to me) was keeping autoplay: false and passing the animation's duration into seek() after creation. This would make the animation start at the end and never play.

   Here's the issue: this isn't always straightforward. For example, the duration of anime.timeline({ /** */ }) isn't known until the last call of timeline().add(); each call to add increases the timeline's duration. To use this solution, I'd have to always remember to call seek(duration) last, which I'm likely to forget.

3. I've tried lots of other ideas like setting easing: 'steps(1)' with autoplay: true. This looks right, but the update callback is called on every frame of the animation's duration. If the animation loops, it's called until you leave the page.

   Maybe this is a good solution, but I feel like there are scenarios where you wouldn't want update to be called when the animation is supposed to be frozen.

4. So I tried the same idea but with autoplay: false. This seems to work the way I want. update is never called, and the animation starts and stays on the last frame, even if loop: true.

5. Unfortunately, that's when I realized anime.timeline()'s return value doesn't have an easing property. In hindsight, that makes sense (I expected it to exist because autoplay and duration do). That means a separate solution must be used for timelines.

6. Setting duration: 0 seems to work as well as my previous solution, but it's difficult to use this solution in timelines (see solution 2. for an explanation as to why).

Is there a simpler/correct way to freeze an animation and/or timeline on the last frame?