Motion Frame

A Typescript lambda animation / easing engine built on top of requestAnimationFrame

About

Motion Frame is an animation engine that is run off the concept of lambda animation functions. The way that these functions work is that you define the end state of an animation that you want in JS, and then multiply any values with the provided easing variable x (value between 0 and 1) and then let the engine work its magic :)

Usage

To use Motion Frame, run npm install motion-frame and import Motion and / or MotionChain into your project. Motion is the main class to use to initiated your animations, while MotionChain allows you to chain animations together to then play in order. To use them, you need to provide an MotionProps object in the constructor (in the the MotionChain's case, an array of MotionProps)

Key	Type	Default	Description
animation (required)	Function (AnimationFrame)	void	The lambda animation that will run
easing	Function (x)	(x) => x	The easing function that the animation will take
duration	Number	1000	The duration of the animation in milliseconds
reverse	Boolean	false	If the animation should play in reverse
loop	LoopType	LoopType.NONE	If the animation should loop after it finishes
before	Function (state)	(state) => {}	A function that will trigger before the animation has begun (resets after stop)
after	Function (state)	(state) => {}	A function that will trigger once the animation has finished each run
state	Object	{}	Persistent state that can be accessed within the animation and after lambdas
reset	Function	void	Gets called immediately after the animation gets reset to its original position

Example

import { Motion } from "motion-frame";

const boxElement = document.getElementById("box");
const boxRect = boxElement.getBoundingClientRect();

const boxAnimation = new Motion({
  duration: 2000,
  loop: LoopType.ALTERNATE,
  easing: (x) => x < 0.5 ? 8 * x * x * x * x : 1 - Math.pow(-2 * x + 2, 4) / 2, // easeInOutQuart
  animation: (frame) => {
    let destX = (window.innerWidth - boxRect.width) / 2;
    let amountX = (destX - boxRect.left) * frame.progress;

    boxElement.style.left = `${amountX}px`;
  },
  after: () => {
    boxElement.innerHTML = boxAnimation.playCount;
  }
});

boxAnimation.play();

AnimationFrame

The animation function receives an object containing three parameters:

• progress (number): The eased progress value (0-1) after the easing function has been applied
• progressMs (number): (number): The unmodified progress value (0-1) before easing is applied
• state (TState): The persistent state object

This allows you to use different progression values for different aspects of your animation:

import { Motion } from "motion-frame";

const complexAnimation = new Motion({
  duration: 1000,
  easing: (x) => x < 0.5 ? 8 * x * x * x * x : 1 - Math.pow(-2 * x + 2, 4) / 2, // easeInOutQuart
  animation: (frame) => {
    const { progress, progressMs } = frame;

    // Use eased value for position (accelerated movement)
    element.style.left = `${progress * 100}px`;
   
    // Use linear value for opacity (steady fade)
    element.style.opacity = progressMs;
  }
});

TODO - Future enhancements / additions

1. Make some pre-build easing functions available
2. Create a bunch of examples for all the different features
3. Build out extra documentation and examples around MotionChain
4. Unit tests