API

  • Action

    Create a reactive stream of values.

  • Animation

    • Decay

      Exponential deceleration, primarily for use in momentum scrolling.

    • Every Frame

      Fires with timestamp, once every frame.

    • Keyframes

      Animate through a linear sequence of values.

    • Physics

      Integrated simulation of velocity, acceleration, friction and springs.

    • Spring

      Accurate, versatile spring animation.

    • Timeline

      Sequence a multitrack animation with full playback controls.

    • Tween

      Animate between two values over a set duration of time.

  • Calculators

    Simple functions useful in UI calculations.

  • Compositors

    • Chain

      Chain a sequence of actions, move to the next when the current one completes.

    • Composite

      Control a map of actions and output to that same structure.

    • Crossfade

      Fade between two numerical actions.

    • Delay

      Fires complete after the defined interval.

    • Merge

      Combine multiple actions into one output.

    • Parallel

      Control multiple actions in parallel and output as an array.

    • Schedule

      Use an action to control the output of another.

    • Stagger

      Stagger the execution of a series of actions.

  • Easing

    Functions that speed or slow a tween over time.

  • FAQs

    Popmotion frequently asked questions

  • Framesync

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

  • Input

    • Listen

      Creates a DOM event listener as an action stream.

    • Multitouch

      Tracks multitouch input.

    • Pointer

      Outputs the screen position of a single mouse or touch point.

  • Reactions

    • Multicast

      A reaction that multiple reactions can subscribe to.

    • Value

      Track value state and query velocity

  • Styler

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

    • CSS

      CSS Styler optimised for animation.

    • DOM Scroll

      Scroll viewport and DOM elements.

    • SVG

      SVG styler with simplified transformation model and line drawing support.

  • Transformers

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