viva-ct v1.0.0

vivaCT

Version 1.0.0 vivaCT is a tiny dynamic animation library built for easy generation of animation on webpages.

The ready to use animation data was imported from Animate.css library by Daniel Eden - https://daneden.github.io/animate.css/

Installation

Include dist/viva-ct.js or dist/viva-ct.min.js as part of your application

Creating a new Object

let obj = new VCT('#obj');

Config

A sample config object is given below. It is not mandatory to include all properties .

{
	q: 'enter from left',			// default = null
	duration: '1s',				// default = '1s'
	timingFunction: 'ease-in-out',	        // default = 'ease-out'
	delay: '0s',				// default = '0s'
	iterationCount: 3,			// default = '1'
	direction: 'normal',			// default = 'normal'
	keyframes: [],			        // default = '[]' - Refer to Custom Animations
	onStart: function() {},			// Callback function to be triggered at the start of an animation
	onEnd: function() {},			// Callback function to be triggered at the start of each iteration, except first
	onStep: function() {}			// Callback function to be triggered at the end of an animation
}

Methods

Custom Animations

The keyframes array of the config object is used to define custom animations.

Example Usage

let obj = new VCT('#obj');

obj.fade({
	q: 'enter from left',
	duration: '1s',	
	timingFunction: 'ease-in-out'
});

obj.jello();

obj.pulse({
  	iterationCount: 5,
	onStep: function(){
		console.log('pulse!')
	}
});

obj.custom({
	keyframes:[
		{
			at: [20,80],
			state:['transform: translate3d(-100%, 0, 0)']
		},
		{
			at: [0,50,100],
			state:['transform: translate3d(0, 0, 0)']
		}
	]
});