• Action

    A process that changes a value over time.

    • Color Tween

      Blends from one color to another using linear interpolation.

    • Delay

      A dummy action that completes after a set duration of time.

    • Physics

      Simulate velocity, acceleration, friction and spring physics.

    • Pointer

      Tracks mouse and touch movement.

    • Spring

      An accurate, versatile spring animation.

    • Touches

      Tracks multi-touch movement.

    • Track Offset

      Track the offset of another Action.

    • Tween

      Change a value over a specific duration of time.

    • Value

      A simple value that updates when a new number is passed to `set`.

  • Action composition

    An action that composes two or more actions.

    • Blend Tweens

      Blend between two tweens using a bezier interpolator.

    • Chain

      Chain a linear sequence of actions.

    • Composite

      Control multiple named actions simultaneously.

    • Cross Fade

      Fade between any two actions.

    • Parallel

      Control playback of multiple actions in parallel.

    • Stagger

      Stagger the start of a series of a actions.

    • Timeline

      Compose tweens into a single, scrubbable timeline.

  • Calculators

    Simple functions useful in UI calculations.

  • Easing

    Functions that speed or slow a tween over time.

  • Framesync

    Schedule functions to run at specific steps on the render loop.

  • Plugins

    Extend the functionality of Popmotion with these optional plugins

    • Draggable

      Make any DOM node or React component draggable with one line of code!

    • React

      Popmotion animation, tweening and input tracking - in React!

    • Spinnable

      Make any DOM node or React component spinnable!

  • Stylefire

    Style setters for CSS, SVG and scroll, optimized for animation.

    • CSS

      CSS Styler optimised for animation.

    • DOM Scroll

      Scroll viewport and DOM elements.

    • SVG Path

      Optimised SVG Path renderer.

    • SVG

      SVG styler with simplified transformation model and line drawing support.

  • Transformers

    Simple composable functions that take a value and return a new one.

  • Value Types

    Parsers, transformers and tests for common style value types, eg: %, hex codes etc.