Skip to content
🐛 Building Performant Animation in Elm
Elm HTML TypeScript CSS
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.
docs Re-add docs without content hashing Sep 11, 2019
.gitignore Update slide link Sep 13, 2019

Elm Animation Exploration


This project is for exploring the idea of doing highly performant animation in Elm with a nice API.

It's presented at Elm-Conf 2019 with the title: Building Highly Performant Animations in Elm

Install all dependencies:

npm install

To run the slide:

npm run slide

and then go to http://localhost:2222

Source code:

To run Caterpillar Animation

Pure Elm Version

npm run slow

Web Animations API Version

npm run fast

Source code:

To run Caterpillar (Pure Elm version)

Sample Animations (Apple animations)

Pure Elm

Source code:

CSS (including experimental library)

Source code:

Web Animations API (including experimental library)

Source code:


This is an experimental project, and doesn't support all types of animation yet. I'm interested to build and publish a more complete package, but I have a limited free time.

If you think this is a good idea and you're interested in collaborating to make this library a published Elm package, reach out to me at:

You can’t perform that action at this time.