Fork me on GitHub

elementTransitions.js

This repository is a wrapper around the code provided by a codrops article on page transitions. Their code has been modified to allow more than one animatable element per page. Additionally, you can now add transitions straight from html tags.

License

All Transitions

In:
{{t.enter}}
Out:
{{t.leave}}

Examples

A stand alone example is also available (no Bootstrap or Angular.js).

Rotate on element click

Page 1

Page 2

Rotate on button click

Page 1

Page 2

Different transitions

Page 1

Page 2

Usage

To load elementTransitions, add elementTransitions.min.js and elementTransitions.min.css to your page. Here is an example of what should be in your head tag.

Some animations use additional properties, such as a delay or "ontop". These can be added inside the same et-in and et-out tags separated by a space.

In:
scaleUpDown delay300
Out:
scaleDown
In:
scaleUpDown delay300
Out:
scaleDown
In:
scaleUpDown delay300
Out:
scaleDown