abadi199/elm-animation-exploration

🐛 Building Performant Animation in Elm

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:

• Elm Community Slack: @abadi199
• Twitter: @abadikurniawan
• or open an issue here: https://github.com/abadi199/elm-animation-exploration/issues/new