README.md

Mithril FLIP Component

A Mithril wrapper component for simplifying and assisting with the FLIP based animation technique.

• https://aerotwist.com/blog/flip-your-animations/
• https://css-tricks.com/animating-layouts-with-the-flip-technique/

Quick Overview

The FLIP component enables you to add transition behavior to your plain old Mithril children vnodes. You can create your vnode children (e.g. m('div') or m(Component) ) without having to think about or implement the transition and animation hooks, then subsequently wrap your child / children vnodes with the FLIP component. You wire up your desired transition / animation handling with callbacks on the FLIP component.

How it Works

The FLIP component requires a keyed child or children for managing the lifecycle hooks required to achieve inbound, outbound, and moving animations.

FLIP children vnodes are augmented with Mithril's standard lifecycle hooks oncreate, onupdate, and onbeforeremove. You provide enter(), exit(), and move() callbacks on the FLIP attrs and the FLIP component handles the ceremony of determining when to call the corresponding FLIP callback based on each child's dom.

FLIP's view() function will simply return the passed children parameters.

m(FLIP, {
    enter: (vnodeChild, flip) => doSomethingCoolOnEnter()  // called for each child created in this redraw
    move: (vnodeChild, flip) => doSomethingCoolOnMove()    // called for each child moving in this redraw
    exit: (vnodeChild, flip) => doSomethingCoolOnExit()   // called for each child being removed in this redraw
}, [
    m('div', {key: 1}, 'hello'),
    m('div', {key: 2}, 'world')
])

In the above example, enter(), exit(), and move() will be called for each child depending where that child is in it's create / update / remove lifetime.

Additionally, the second parameter flip is an object that contains all the keyed children's bounding rects obtained with getBoundingClientRect. This gives all the details needed to perform FLIP based delta's and starting animation / transition points.

Examples

• Example - String Animation
• List Animation - flems link
• Route Page Transitions - flems link