Fork me on GitHub

Ractive.js fly transition plugin

download: ractive-transitions-fly.js more plugins at ractivejs.org/plugins

This transition uses CSS transforms to 'fly' elements to their natural location on the page, fading in from transparent as they go. By default, they will fly in from left.

You can change the starting (or ending, if it's an outro) x and y properties, as shown below – by default these values are assumed to be pixel values, but you can equally use any CSS length (such as % or em values).

The delay, duration and easing values are also yours to play with, and behave as you'd expect. The duration property is in milliseconds, and easing should be a valid CSS easing property, such as those generated from cubic-bezier.com.

In browsers that do not support CSS transforms (i.e. IE8 and below), elements will simply fade in or out.