Create cool web animations in no time!
Super easy to use and super easy to learn!

Try out interactive - A P I - E X A M P L E S

Code used for background animation:

<fx-animate element=".bg-rectangle" speed="4" stagger="0.5" repeat="-1" yoyo from-scale="1" to-scale="8" perspective="1000" from-rotation-y="0" to-rotation-y="360" from-skew-x="0" to-skew-x="360"></fx-animate>

Install:

> bower install -save stasha/declaranime

And than include in your html:

fx-move

Move html elements

Bullet 1
Bullet 2
Bullet 3

<fx-move id="moving-list" element=".moving-list li" stagger="0.2" from-x="0" to-x="150" speed="2" paused ease="Elastic.easeOut"></fx-move>

fx-rotate-3d

Rotate html elements

<fx-rotate-3d id="rotating-box" element=".rotating-box" stagger="0.3" to-rotation-x="+=180" to-rotation-z="+=180" speed="3" paused ease="Elastic.easeOut"> </fx-rotate-3d>

fx-timeline

Create complex html animations

<fx-timeline element=".timeline-box" id="timeline" yoyo puased repeat="2"> <fx-move to-x="150"></fx-move> <fx-move to-y="80"></fx-move> <fx-rotate to-rotation="+=180"> </fx-rotate> <fx-move to-x="0" to-y="0"> </fx-move> </fx-timeline>

fx-drag

Drag html elements

<fx-drag element=".drag-box0" bounds="#bound-box"> </fx-drag> <fx-drag element=".drag-box1" bounds="#bound-box" lock-axis> </fx-drag> <fx-drag element=".drag-box2" bounds="#bound-box" type="rotation"></fx-drag>

What is <declaranime />

In a few words...

<declaranime /> is tiny library for creating html animations in declarative (html) way. It is built on top of GSAP and Google Polymer libraries. More precisely, <declaranime /> is just a simple wrapper around GSAP thus all real cool animation algorithms and logic are handled by GSAP.

Facts about <declaranime />

In a few points...

Easy to install
Easy to learn
Easy to use

More about <declaranime />

In short...

<declaranime /> was born as a hobby "side effect" to other hobby project and that's why it is built on top of these technologies. Because project size was never concern, <declaranime /> uses TweenMax and TimelineMax libraries as default animation "providers". If file size concerns you, you can modify "declaranime.html" file and use TweenLite and TimelineLite with desired plugins.