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/
npm i viva-ct
Include - dist/viva-ct.js or - dist/viva-ct.min.js as part of your application
let obj = new VCT('#obj');
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
}
Name | q |
---|---|
flash | |
rubberBand | |
shake | |
headShake | |
swing | |
tada | |
wobble | |
jello | |
pulse | |
fade | 'enter' / 'enter from top' / 'enter from right' / 'enter from bottom' / 'enter from left' / 'exit' / 'exit to top' / 'exit to right' / 'exit to bottom' / 'exit to left' |
bounce | 'enter from inside' / 'enter from outside' / 'enter from top' / 'enter from right' / 'enter from bottom' / 'enter from left' / 'exit to inside' / 'exit to outside' / 'exit to top' / 'exit to right' / 'exit to bottom' / 'exit to left' |
zoom | 'enter from inside' / 'enter from outside' / 'enter from top' / 'enter from right' / 'enter from bottom' / 'enter from left' / 'exit to inside' / 'exit to outside' / 'exit to top' / 'exit to right' / 'exit to bottom' / 'exit to left' |
flip | 'enter along X' / 'enter along Y' / 'exit along X' / 'exit along Y' |
slide | 'enter from top' / 'enter from right' / 'enter from bottom' / 'enter from left' / 'exit to top' / 'exit to right' / 'exit to bottom' / 'exit to left' |
custom |
The keyframes array of the config object is used to define custom animations.
Property | Value | Example |
---|---|---|
at | A set of integers indicating the percentage position along the timeline of an animation | '[0,22.5,35,84]' |
state | A set of css properties representing the state of the animated object at the spectified time | ['opacity:0.5', 'transform: translate3d(-100%, 0, 0)'] |
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)']
}
]
});