Elm-motion is live!

Show and Tell
1

Hi everyone :waving_hand:

I’m happy to announce the first release of elm-motion — a comprehensive animation and scrolling library for Elm.

The core idea: six animation engines behind a single, consistent builder API. You describe what should animate once, then decide how it runs by selecting (or swapping) the engine — CSS transitions, keyframes, pure-Elm frames, or the Web Animations API — without rewriting your definitions. Alongside them are three scroll engines with their own API in the same builder style.

Animation engines (one shared API)

  • Transition — CSS transitions, minimal setup
  • Keyframe — CSS keyframes with looping and full control
  • Sub — pure Elm, frame-based, with real-time state queries
  • WAAPI — the Web Animations API, via a small JS companion
  • ScrollTimeline — scroll-driven animation
  • ViewTimeline — viewport-driven animation

The Transition, Keyframe and Sub engines (and all scroll engines) are pure Elm — no ports, no JavaScript. The WAAPI/ScrollTimeline/ViewTimeline engines use an optional companion (@phollyer/elm-motion on npm) for hardware-accelerated and scroll-driven motion.

Scroll engines

  • Cmd — fire-and-forget
  • Task — composable, with error handling
  • Sub — stateful, with mid-scroll queries

Also included

  • Property modules: opacity, translate, rotate, scale, skew, size, perspective-origin, plus Custom (any numeric CSS property) and CustomColor (any color property)
  • Shared easing helpers for animation and scroll engines
  • Springs support for 5 of the 6 animation engines
  • Reduced-motion support — the WAAPI-based engines honour prefers-reduced-motion: reduce, snapping to the end state while still firing lifecycle events

Getting started

elm install phollyer/elm-motion

There’s a documentation site with guides and live examples here: Elm Motion

Feedback welcome

This is my most ambitious Elm project so far, and I’d love to hear what you think — API ergonomics, missing pieces, rough edges, or things you’d animate with it. Issues and ideas are very welcome on the GitHub repo.

Thanks to the Elm community — I’ve learned a huge amount here, and this is a small way of giving back while also having a great deal of fun creating it. :folded_hands:

13 Likes
2

Bumped to 2.0.0 on first day of release :man_facepalming: :rofl:

This was due to an API fix in the generic Builder that actually widened it’s use, and wouldn’t have affected any code in use. elm bump insisted on the major version change.

3 Likes