Component

Animations engine

ANIMATIONS INTRODUCTION


Examples

Base
Inner animation target
Outer animation target
Javascript function

Data-time setting
End animation back
End animation fixed
End animation hide

Installation

<link rel="stylesheet" href='../css/animations.css'>

Usage

<a class="img-box thumbnail" data-anima="fade-left" data-trigger="hover">
    <span>
        <img src="http://www.framework-y.com/images/thumb-wide.png">
    </span>
</a> 
<a class="img-box thumbnail" data-anima="fade-left" data-trigger="hover">
    <span>
        <img class="anima" src="http://www.framework-y.com/images/thumb-wide.png">
    </span>
</a> 
<a class="img-box thumbnail" id="anima-demo">
    <span>
        <img src="http://www.framework-y.com/images/thumb-wide.png">
    </span>
</a>
<button class="btn" type="button" data-anima="fade-top" data-trigger="click" data-target="#anima-demo">
    Start animation
</button>
<a class="img-box thumbnail" onmouseover="$(this).showAnima('pulse-horizontal');">
    <span>
        <img src="http://www.framework-y.com/images/thumb-wide.png">
    </span>
</a>
<a class="img-box thumbnail" data-anima="pulse-vertical" data-trigger="hover" data-time="5000">
    <span>
        <img src="http://www.framework-y.com/images/thumb-wide.png">
    </span>
</a> 

Main settings

Name Type Description
HTML initialization Data attribute Add data attribute data-anima="animation-name"to target object. Default trigger is on scroll.
Javascript initialization Javascript To animate a 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 features like attribute data-anima and childrens animations.
Inner animation target CSS class Animate a element inside a parent element, parent element is the trigger area of the animation. Useful expecially for on hover animations. To create inner animations simple add class anima to inner element.
To set different inner animations add class anima-animation-name to inner element. Example: <div class="anima anima-fade-left"></div>.
Outer animation target CSS class Animate a element outside a trigger element, trigger element is the trigger of the animation. Useful expecially for on hover and on click animations. To create outer animations add data-attribute data-target="#target". You can obtain same result with Javascript initialization.
HTML settings Data attribute Animations settings are five: data-anima, data-trigger, data-time, data-anima-out, data-timeline.
Data attribute Description
data-anima="animation-name" Set the animation type.
data-trigger="value" Set when to activate the animation. Values accepted are scroll, load, hover, click. Default value is scroll.
data-time="1234" Set duration of animation in milliseconds.
data-anima-out="value" Set what to do when animation is deactivated, for example when mouse out of target. This attribute is not needed most of times but if you get unexpected results try this. Values accepted are back, fixed, hide. Default value is back.
data-timeline="value" Create a sequence animation of a group of elements. Values accepted are asc, desc.

ANIMATIONS TYPES


Examples

Fade In
Fade Left
Fade Right
Fade Top

Fade Bottom
Rotate 90
Rotate 20
Scale

Scale 2x
Scale Rotate
Show scale
Pulse

Pulse Fast
Pulse Horizontal
Pulse vertical
Slide Right From Left

Slide Bottom From Top
Circular Rotation

Main settings

Name Type Description
Animation types Data attribute Built-in animations are 17:
Name Data 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"
Rotate 90 data-anima="rotate-90"
Rotate 20 data-anima="rotate-20"
Show scale data-anima="show-scale"
Scale data-anima="scale-up"
Scale 2X data-anima="scale-up-2x"
Scale Rotate data-anima="scale-rotate"
Pulse data-anima="pulse"
Pulse Fast data-anima="pulse-fast"
Pulse Horizontal data-anima="pulse-horizontal"
Pulse Vertical data-anima="pulse-vertical"
Circular Rotation data-anima="circular-rotation"
Slide Right From Left data-anima="slide-right-left"
Slide Bottom From Top data-anima="slide-top-bottom"
Default animation Javascript You can set default animation by edit file ../script.js, edit code var default_anima = "fade-in"; and replace fade-in with animation name you want. After this step you can use the default animation like others animations with keyword default.
Example: data-anima="default".
Add custom animation CSS coding You can add your custom animations very quickly. Open CSS file ../css/animations.css go to bottom (or where you want) and add your class animation with this sintax belove:

@keyframes your-animation-name {     /* This is your aniamtion */
	0% { transform: scale(1); }      /* Start of animation */
	100% { transform: scale(1.2); }  /* Finish of animation */
}
.your-animation-name,.img-box.your-animation-name:hover img {
    /* Set time you want, attribute date-time will overwrite this time */
    animation: your-animation-name 1s;    
 
    /* Here insert same animation of @keyframes 100% */     
    transform: scale(1.2);    
     /* Opacity:1 !important must be always inserted */                  
    opacity:1 !important;                                    
}


Now you can use your animation exactly like all others built-in animations.
Example: data-anima="your-animation-name".

ANIMATION TRIGGERS


Examples

Trigger on scroll

Trigger on load

Trigger on hover

Trigger on click

Main settings

Name Type Description
Trigger types Data attribute Trigger types are four:
Name Data attribute Description
On Scroll data-trigger="scroll" Start the animation on page scroll, when element is visible on viewport.
Example: <img src="http://www.framework-y.com/images/thumb-wide.png" data-anima="fade-left" data-trigger="scroll">.
On Load data-trigger="load" Start the animation on page load, immediately on page open.
Example: <img src="http://www.framework-y.com/images/thumb-wide.png" data-anima="fade-left" data-trigger="load">.
On Hover data-trigger="hover" Start the animation on mouse hover the trigger element, remove animation on mouse out.
Example: <img src="http://www.framework-y.com/images/thumb-wide.png" data-anima="fade-left" data-trigger="hover">.
On Click data-trigger="click" Start the animation on mouse click.
Example: <img src="http://www.framework-y.com/images/thumb-wide.png" data-anima="fade-left" data-trigger="click">.

ANIMATIONS GROUPS


Examples

Animations group

Animations timeline group - ascending order

Animations timeline group - descending order

Animations timeline group - time and multiple animations

Usage

<div data-anima="fade-bottom">
    <div class="col-md-3">
        <a class="img-box-demo thumbnail anima">
            <span>
                <img src="http://www.framework-y.com/images/thumb-wide.png">
            </span>
        </a>
    </div>
    <div class="col-md-3">
        <a class="img-box-demo thumbnail anima">
            <span>
                <img src="http://www.framework-y.com/images/thumb-wide.png">
            </span>
        </a>
    </div>
    <div class="col-md-3">
        <a class="img-box-demo thumbnail anima">
            <span>
                <img src="http://www.framework-y.com/images/thumb-wide.png">
            </span>
        </a>
    </div>
    <div class="col-md-3">
        <a class="img-box-demo thumbnail anima">
            <span>
                <img src="http://www.framework-y.com/images/thumb-wide.png">
            </span>
        </a>
    </div>
</div>
<div data-anima="fade-bottom" data-timeline="asc">
    <div class="col-md-3">
        <a class="img-box-demo thumbnail anima">
            <span>
                <img src="http://www.framework-y.com/images/thumb-wide.png">
            </span>
        </a>
    </div>
    <div class="col-md-3">
        <a class="img-box-demo thumbnail anima">
            <span>
                <img src="http://www.framework-y.com/images/thumb-wide.png">
            </span>
        </a>
    </div>
    <div class="col-md-3">
        <a class="img-box-demo thumbnail anima">
            <span>
                <img src="http://www.framework-y.com/images/thumb-wide.png">
            </span>
        </a>
    </div>
    <div class="col-md-3">
        <a class="img-box-demo thumbnail anima">
            <span>
                <img src="http://www.framework-y.com/images/thumb-wide.png">
            </span>
        </a>
    </div>
</div>
<div data-anima="fade-bottom" data-timeline="asc" data-time="3000">
    <div class="col-md-3">
        <a class="img-box-demo thumbnail anima anima-show-scale">
            <span>
                <img src="../images/animation-thumb.jpg">
            </span>
        </a>
    </div>
    <div class="col-md-3">
        <a class="img-box-demo thumbnail anima anima-fade-right">
            <span>
                <img src="../images/animation-thumb.jpg">
            </span>
        </a>
    </div>
    <div class="col-md-3">
        <a class="img-box-demo thumbnail anima anima-pulse">
            <span>
                <img src="../images/animation-thumb.jpg">
            </span>
        </a>
    </div>
    <div class="col-md-3">
        <a class="img-box-demo thumbnail anima">
            <span>
                <img src="../images/animation-thumb.jpg">
            </span>
        </a>
    </div>
</div>

Main settings

Name Type Description
Animations group Mixed Animations groups animate multiple elements at same time. You can create animations groups with the inner animation target feature: create a container element and add data-attribute data-anima="animation-name", insert into this container the elements to animate and assign them the CSS class anima.
Animations timeline group Mixed Animations timeline groups animate multiple elements in sequence. To create a animations timeline group create a normal animations group like above and add to container the data-attribute data-timeline="asc". You can set two data-timeline values: data-timeline="asc" and data-timeline="desc".
Timeline time Mixed To set the interval between each item of the timeline add attribute data-timeline-time="123". Replace 123 with delay time in milliseconds.

GRAPHICS ANIMATIONS


Examples

Pulse G. Animation
Explode G. Animation
GLASS G. Animation

Main settings

Name Type Description
Graphics animation types Data attribute Graphics animations are exactly like normal animations but its contain also some graphic element. Built-in graphics animations are three:
Name Data attribute
Graphic Animation Pulse data-anima="ganimation-pulse"
Graphic Animation Explode data-anima="ganimation-explode"
Graphic Animation Glass data-anima="ganimation-glass"