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.

One …
The Other
<!-- Animated Element -->
<div class="any-element"
//====> View-Port 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.

Directional ExampleDescriptionResult in [LTR]Result in [RTL]
fadeInStartshow with opacity and slide to the page direction to startfadeInLeftfadeInRight
fadeOutStarthide with opacity and slide to the page direction to startfadeOutLeftfadeOutRight
fadeInEndshow with opacity and sliding to the page direction endfadeInRightfadeInLeft
fadeOutEndhide with opacity and slide to the page direction endfadeOutRightfadeOutLeft
Note : ( —— ) refer to the same value as the column before.

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 <====//
animateCSS: [
Animations SetsDescription
fadingLoad Fading in and out animation set from animate.css
slidingLoad Slide in and out animation set from animate.css
flippersLoad Flapping in and out animation set from animate.css
attentionsLoad Attention Seekers animations set from animate.css
lightspeedLoad Lightspeed animations set from animate.css
rotatingLoad Rotating animations set from animate.css
zoomingLoad Zooming animations set from animate.css
specialsLoad Specials animations set from animate.css
backLoad Back In/Out animations set from animate.css
bouncingLoad Bouncing animations set from animate.css
utilitiesLoad animate.css set of classes for animations utilities.
all or trueLoad all animations set from animate.css
Note : ( —— ) refer to the same value as the column before.

Options Table

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

OptionDescriptionDefaultData Type
animationCSS Animation Namenonestring
durationAnimation Duration by “ms”nonenumber
delayAnimation Delay by “ms”nonenumber
lazyloadingAnimate Element after Anotherfalseboolean
animateCSSLoading Animate.css Librarytrueboolean
directionFixLogical Directions Resolver to read Start, End instead of Left/Right.trueboolean
flowScroll Flow [start, end]nonestring
intoIncrease Target Position By [number]nonenumber
offsetDecrease Target Position By [number]nonenumber
lazygroupDefine the group for each lazyloading grouptruestring
Animations Plugin Options Table.

Table of Content