Change animation direction, pause animations, move animation to a key frame, change animation easing functions

[sparksflyupwards]

No description provided.

[sparksflyupwards]

Would be happy to work/collaborate on this if it isn't already in the works!

[stevenpetryk]

What would some of these APIs look like to you, ideally?

[gsspdev]

I am also interested in working on this. I have some ideas in mind of how to implement these features

[sparksflyupwards]

What would some of these APIs look like to you, ideally?

one approach would be to add an 'animationSettings' object to the Stopwatch interface. Then users can configure properties such as reversed, repeats, ease function, etc... An enum of different Easing options could also be included.

So for example if a user wanted a repeating animation with a "bounce" ease effect they may do as follows:

import { Mafs, useStopwatch, Easing } from "mafs"

function AnimatedPoint() {
  const { time, start, animationSettings} = useStopwatch();

  React.useEffect(() => {
    animationSettings = {
      ease: Easing.bounce
      repeats: true,
    };
    start();
  }, [start]);

...

However, if repeating animations are included, this would require a definite animation length. As an example a user could configure a reversed and repeating animation of 10 seconds like so:

function AnimatedPoint() {
  const { time, start, animationSettings } = useStopwatch();

  React.useEffect(() => {
    animationSettings = {
      ...animationSettings,
      length: 10,
      reversed: true,
      repeats: true,
    };
    start();
  }, [start]);

...