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.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
design
docs Re-add docs without content hashing Sep 11, 2019
src
tests
.gitattributes
.gitignore
CODE_OF_CONDUCT.md
README.md Update slide link Sep 13, 2019
elm.json
package-lock.json
package.json
tsconfig.json

README.md

Elm Animation Exploration

Slide: https://elm-animation-exploration.netlify.com

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: https://github.com/abadi199/elm-animation-exploration/tree/master/src/Slide

To run Caterpillar Animation

Pure Elm Version

npm run slow

Web Animations API Version

npm run fast

Source code: https://github.com/abadi199/elm-animation-exploration/tree/master/src/Caterpillar

To run Caterpillar (Pure Elm version)

Sample Animations (Apple animations)

Pure Elm

Source code: https://github.com/abadi199/elm-animation-exploration/tree/master/src/Elm

CSS (including experimental library)

Source code: https://github.com/abadi199/elm-animation-exploration/tree/master/src/Css

Web Animations API (including experimental library)

Source code: https://github.com/abadi199/elm-animation-exploration/tree/master/src/Js

Contribution

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.