"Building Highly Performant Animations in Elm"

on YouTube ↗25m

" summary

Compares three concrete implementations and measures their effect on frame rate: a pure Elm approach using AnimationFrame subscription that becomes cumbersome and drops FPS into the teens with lots of DOM work, a declarative CSS keyframes approach that leverages browser optimizations but needs manual timeline syncing, and a bridge to the Web Animations API via a web component plus JSON encoder that runs at 60 FPS, emits finish events to coordinate sequences, and relies on Chrome/Firefox support (polyfill available).

AI-written summary · about

" chapters (5)

1. 0:00Introduction and motivation
2. 3:02Pure Elm approach
3. 9:34CSS animation land
4. 14:56Web animation API
5. 22:57Conclusion and Q&A

" related talks

• 09mRich AnimationMatthew Griffith · Elm Conf 2016
• 22mPerformant web animations — Emily HaymanEmily Hayman · JAMstack Conf 2017
• 36mSmooth Animations for Web & HybridAlexander Blom · Web Unleashed 2017
• 30mAlgorithms for AnimationCourtney Hemphill · Full Stack Fest 2015
• 18mDOM animations, almost nativeArun Subramaniam · Meta Refresh 2015
• 28mMake your animations perform wellAnna Migas · JSConf Budapest 2017
• 44m60 Frames of AnimationsPablo Molina · Commit Conf 2018
• 33mSaving the Web 16 Milliseconds at a TimeJOSH W COMEAU · React Boston 2019