CSS Transitions in Elm
This is the repository containing the slide deck sources (with speaker notes) and sample code for a talk I gave at ElmConf US in St. Louis in September 2017.
The video for the talk has been posted! Thanks to @BrianHicks and @lukewestby for organizing this wonderful get-together, helping me hone the talk, and doing all the hard work that continued after the conference to get the talks online.
You can see all of the talks (as of October 5, 6 have been posted so far) on the elm-conf US 2017 YouTube playlist.
Alert and InfoBox Widgets
The src folder contains "shared view" code for three modules:
Alertmodule for animated alerts (or "flash" messages).
AlertWithSubmodule: a slight variant of the
Alertmodule that uses the
AnimationFrame.timesSub function to ensure that initial views are rendered for at least one animation frame cycle.
InfoBoxmodule for animated blocks of text triggered by an icon click.
See the README.md file in the demo/ directory for an application that shows the client code for these modules, as well as a router transition UI that also uses CSS transitions.
To build the app:
cd demo elm-make --output=TransitionsDemo/elm.js TransitionsDemo/Main.elm cd ..
Then open the demo/index.html file in a browser.
ElmConf 2017 Presentation
Reveal.js presentation sources are in the slides/ directory. To build static presentation files into slides/dist/:
cd slides grunt dist cd ..
More information on the slide deck is in the README.md file in the slides/ directory.
Then hyperlinks from the slides to the demo application and back will work if you run a static web server in the project directory:
python -m SimpleHTTPServer 8000
And go to the first slide at http://localhost:8000/slides/dist/
And the demo application will be at http://localhost:8000/demo/
Other Animation Resources
These are all great resources if you want to explore fundamentals of animation in Elm:
- http://package.elm-lang.org/packages/debois/elm-mdl/latest (especially the Material.Ripple module)
- http://package.elm-lang.org/packages/mdgiffith/style-elements/latest (CSS Transitions are supported in the Style.Transition module)
And if you're interested in the "page transitions" example, here are some proposals from Chrome browser developers and the Angular community: