Feature: improved animations

[sc0ttj]

Make it easier to manage animations during playback:

1. Expose the functionality of both tweenState and springTo which let you pause, resume or stop animations, during playback. Both add-ons have this functionality hidden away - expose it, and update the docs.

2. Add a direction prop to tweenState and springTo configs, based on CSS direction property

3. Add a stopAt prop, to say where the anim should skip to when stopped (current, start or end).

4. Add repeat and repeatDelay props, to apply staggered anims to a collection of elems/items.

Example usage:

Foo.setState({ x: 0 });

const myAnim = Foo.tweenState(
  // the props to tween
  { x: 99 }, 
  // the tween settings
  { 
     paused: true, // don't auto play
     duration: 4000,
     direction: 'alternate', // which direction to animate.. can be 'forward', 'backward', 'alternate' 
     stopAt: 'end', // where to go when stop() is called during playback.. can be 'current', 'end' or 'start'
     repeat: 3, // loop 3 times
     repeatDelay: 1000, // pause for 1 second between each loop 
  }
);

myAnim.play() // start the tween

myAnim.pause() // pause the tween

myAnim.resume() // continue the tween

myAnim.stop() // stop the tween, (and go back to frame 1 or end, see `stopAt` prop)

[sc0ttj]

Also see https://motion.dev - a tiny library that improves on the Web Animation API - uses GPU for all anims, supports tree shaking, fixes various unintuitive, weird or rubbish features of it.. Doesn't have spring animation.. Has timelines, sequences, stagger, etc.

And https://github.com/wellyshen/use-web-animations - a react hook that uses the Web Animation API.

Also <animatable> - use Web Animations API in a declarative way (web component)

[sc0ttj]

Also see this: https://github.com/robinweser/small-color

And this: https://gist.github.com/sc0ttj/a024df2b447ae3f655658354c44f3b9d

[sc0ttj]

Also come up with some animation timeline thing - to make it easy to arrange animations..

Something like GSAP Timeline, which uses a "position" property for each anim in the timeline, which can take a bunch of special things, like

• <+=2.1, which means start 2.1 seconds after the start of the previous anim,
• >-=0.3 which mean start 0.3 seconds before the end of the previous anim
• and so on

In GSAP, you pass in anims like so (or similar...):

const timeline = new Timeline({
  anims: [
    {
      el: '.foo',
      // the keyframes - give the end values of the properties to be animated
      keyframes: [
        { scale: 2, duration: 1.2 },
        { opacity: 0, duration: 0.5 }
      ],
      position: '<',       // the "<" means start of prev anim (or start of timeline if no prev anim)
    },
    {
      el: '.bar',
      keyframes: [
        { yPos: 200, scale: 2, duration: 0.1 },
        { opacity: 0, duration: 0.4 }
      ],
      position: '>',       // the ">" means end of prev anim
    },
  ],
  onPlay: self => {},
  onUpdate: self => {}, // runs each frame
  onPause: self => {},
  onStop: self => {},
);

// now use it
timeline.play();
timeline.pause();
timeline.stop();

And motion.dev timelines look something like this:

import { timeline } from "motion"

const sequence = [
  [".foo", { opacity: 1 }],
  // This will start 0.5 seconds after the previous animation:
  [".foo", { x: 100 }, { at: "+0.5" }],
  // This will start 0.2 seconds before the end of the previous animation:
  [".foo li", { opacity: 1 }, { at: "-0.2" }],
];

const options = {
  duration: 2.0,  // seconds
  delay: 1.0,      // seconds
  endDelay: 0.0, // seconds
  direction: 'normal', // "normal", "reverse", "alternate", or "alternate-reverse"
  repeat: 1, // default 0, can be 'Infinity'
  defaultOptions: { ... }, // default opts for each anim (easing, etc)
};

timeline(sequence, options);

[sc0ttj]

Also see/steal: https://popmotion.io/api/physics/

Simulate velocity, acceleration, friction and springs.

This is an integrated simulation, meaning the latest state is incorporated at discrete time intervals. It exposes set methods that change the simulation while it’s running.

Unlike tweenState and springState, which can't be modified on the fly once running, the above can be.

It's a mini integrated physics fixed loop, that lets u update it while running.. something like:

// a spring example
const myAnim = physics({
  from: 0,
  velocity: 1000,
  friction: 0.8,
  to: 400,
  springStrength: 500
});

myAnim.start();

// change it, while it's running
myAnim.set({
  friction: 0.99
});

[sc0ttj]

https://github.com/ai/nanodelay - super simple sleep equivalent

[sc0ttj]

https://github.com/pbeshai/d3-interpolate-path - standalone, doesn't need d3