View-Port Animations

learn how to create animation effects for your elements when they appear on the screen or in any case you want a nice animation in it for entering and exiting effects.

How it Works

phenix uses a simple functionality to monitor the targeted elements and when they appear in the screen view it adds to it a css animation-name, duration, delay and a class name of .view-active if you need to add your animation scenario to make it show animated, here are some tips on some options :

• flow: is to select between the element view starting from the top or the bottom of the screen.
• into: is to animate the element view after its actual position by adding offset number by pixels
• offset: is to animate before the element’s actual position by adding offset number by pixels
• lazyloading: if you enable the lazyloading option make sure to give each animated elements group a data-attribute of data-lazy-group="1" for the delay to work correctly;
• !important: you can’t use offset and into with each other, you can only increase or decrease the target position.

Basic Usage

to create animated elements when they enter the viewpoint of the screen you can create these effects by using Phenix(‘.view-status’).animations(options) after that, you can use data attributes to define the animation name, duration, delay for each targeted element.

<!-- Animated Element -->
<div class="any-element"
data-animation="fadeIn"
data-delay="500"
data-duration="1000"
data-offset="0"
>...</div>

//====> View-Port Animations <====//
Phenix('.any-element').animations({
animation: "fadeIn", //===> Animation Name
duration: 1000, //===> Animation Duration by "ms"
delay: 500, //===> Animation Delay by "ms"
lazyloading: false, //===> Animate Element after Another
flow : "start", //===> Scroll Flow [start, end]
into : 0, //===> Increase Target Position By [number]
offset : 0, //===> Decrease Target Position By [number]
animateCSS: true, //===> Loading Animate.css Library
directionFix: true, //===> Logical Directions Resolver to read Start, End instead of Left/Right.
});

Animations List

Phenix uses a third-party collection of preset animations from Animate.css Library by Daniel Eden that loaded when you activate the javascript animations and you can find all the animations listed in the library Documentation for further information about its features,

and you can make the directional animations dynamically change depending on the document page direction by activating the directionFix: true in the Javascript options then you can use the terms Start, End instead of Left/Right in your element animation name attribute.

Animations on Demand

as mentioned above the animations() uses a third-party animations library in its core with the option to animate CSS you can define a specific set of animations to load from the library if you do not need the complete library and it can be defined with the js option when you initialize the plugin and give it a value or array of set names:

//====> Loading Animations only without Watching Any Element <====//
Phenix(document).animations({
animateCSS: [
"fading",
"sliding",
"flippers",
"attentions",
"lightspeed",
"rotating",
"zooming",
"back",
"bouncing",
"specials",
"utilities"
],
});

Options Table

in the table and the code below, you will find the plugin options and an example of its syntax.