Cycle version & Stream Library
This branch uses Cycle Diversity w/ xstream.
- Color Changer - Basically just a counter app, but background color changes by looping through an array.
- Redirect After Form Post - Shows one way of handling URL redirects after
- Github Search - Clone of official Cycle example, with snabbdom-specific animations as search results are added/removed.
- Hero Transition (Simple) - Checkbox toggles between pages. Each page is a box with some text. The text does a hero transition.
- Hero Transition (Complex) - 1st page pulls repo list from github. 2nd page is detail for a specific repo. The owner avatar does a hero transition.
- Hero Transition (Tests) - Hero transitions on multiple types of DOM elements, including text which changes orientation and size. Best viewed in Chrome. Other browsers have problems with one of the text transitions.
- Route/Page transitions - currently just opacity fade, but you can easily extend to add transforms. The important part is that your page wrappers are
position: absoluteso they can overlap while transitioning.
- Search result items animate when added & removed.
- Hero transitions (aka. shared element transitions). An item which is common to two pages will smoothly animate to the new position. This relies on the snabbdom hero module, so you'll need to pass a list of modules to the Cycle DOM driver.
- Document how some of these examples work in more detail. There is a careful balance of
position: absoluteon certain elements and containers.
How to use
For client-side hot reloading:
- Clone the repo
- Choose a branch
- Open your browser to