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>


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>


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>


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.