Preview

Base

Inner target

Outer target

Start animation

Javascript function

Animation types

Fade in Fade top Fade right Fade bottom Rotate Scale Scale Rotate
Show scale Pulse Pulse Horizontal

Triggers

Scroll

Load

Hover

Click

Animation groups

Base

Timeline

Timeline - Descending order and multiple animations

Usage

<img data-anima="scale" data-time="2000" data-trigger="hover" src="image.jpg">

<div data-anima="pulse" data-trigger="hover" data-time="2000">
    <img class="anima" src="image.jpg">
</div>

<div class="row" data-anima="fade-bottom" data-timeline="asc" data-time="2000" data-timeline-time="1000">
    <div class="col-lg-3">
        <img class="anima anima-fade-left" src="image.jpg">
    </div>
    <div class="col-lg-3">
        <img class="anima anima-show-scale" src="image.jpg">
    </div>
    <div class="col-lg-3">
        <img class="anima" src="image.jpg">
    </div>
    <div class="col-lg-3">
        <img class="anima anima-pulse" src="image.jpg">
    </div>
</div>

Settings

Name Type Description
Initialization Attribute Add data attribute data-anima="animation-name"to target object. Default trigger is on scroll.
Initialization Javascript To animate an element use function $("#target").showAnima("animation-name");.
Use $("#target").showAnima("animation-name","complete"); to start a full animation process like default animations, it support all the features like attribute data-anima and group animations.
Inner target CSS Add the class anima to inner item of a parent container containing the animaion to animate the item, the parent contain the animation settings and it's the trigger of the animation. To set different inner animations add the class anima-animation-name to inner element.
Ex: <div class="anima anima-fade-left"></div>.
Outer target CSS Add the attribute data-target="#ID" to the trigger item to animate the item with the setted ID.
Options Attribute
data-anima="animation-name" Set the animation type. Animations list below.
data-trigger="value" Set how the animation is activated. Values: scroll, load, hover, click. Default scroll.
data-time="123" Set the animation time in milliseconds.
data-hidden="true" Hide the item associated with the animation and show it only on mouse hover.
data-timeline="value" Animate sequentially multiple items. Values: asc, desc.
data-timeline-time="123" Set the interval in milliseconds between each item animation. Default 500 ms.
Animation types Attribute
Fade In data-anima="fade-in"
Fade Left data-anima="fade-left"
Fade Right data-anima="fade-right"
Fade Top data-anima="fade-top"
Fade Bottom data-anima="fade-bottom"
Show scale data-anima="show-scale"
Scale data-anima="scale"
Scale Rotate data-anima="scale-rotate"
Pulse data-anima="pulse"
Pulse Horizontal data-anima="pulse-horizontal"
Default animation Javascript You can set default animation by edit the file ../../themekit/scripts/main.js, edit the code var default_anima = "fade-in"; and replace fade-in with animation name you want. After this step you can use the default animation with the keyword default.
Ex: data-anima="default".
Add custom animation CSS You can add a custom animation by add it into a CSS file and then by call it like always. Ex. data-anima="your-animation".