The eWizard.js framework supports the Animate.css library for adding animation effects to your slide components.
NOTE: Animate.css is a library of ready-to-use, cross-browser animations for use in your web projects. eWizard.js supports certain animations from this library and provides some custom options for the animation effects.
Usage
To add animation for the e-Detailer component, add this code to the template markup in the slide Vue instance.
<wiz-image v-animate.click="{ name: 'bounce', duration: 1000, delay: 1000, loop: 2 }"></wiz-image>Where:
• name is the animation name. See the list of supported animation effects below.
• duration is the animation duration in milliseconds. The default duration is 1000 ms.
• delay is the delay before the animation starts in milliseconds. The default delay is 0 ms.
• loop is the number of times for animation to play. The default value is 1. You can enter the required repeat number or the true value for the infinite play.
• click is the event to start the animation. Use the dot notation after the v-animate directive. For more information see Directive Hook Arguments. If you don't provide the event, eWizard.js uses the default event. The default event is slideenter to start animation when you open the slide. You can specify any DOM event or slideenter, but eWizard Editor supports only the click and slideenter events.
NOTE: Use the root object keys from the animation effect as the name value. For example, use the rubberBand object key for the rubber animation effect.
Animation effects
The animation effects have the following groups depending on their purpose:
• Entrance
• Emphasis
• Exit
Navigate the tabs with code given below to view the available animation effects for the e-Detailer components.
Entrance
:--- TABS:
TAB: backInDown
export default {
backInDown: {
title: 'Fly in from top',
group: {
name: 'entrance',
title: 'Entrance',
},
type: {
name: 'flyIn',
title: 'Fly in',
},
withTransform: true,
keyframes: [
{
transform: 'translateY(0px) scale(0.7)',
translateY: '+=1200',
scale: '*=1',
opacity: '0.7',
duration: 800,
easing: 'cubicBezier(0.25, 0.1, 0.25, 1)',
progress: '80',
},
{
transform: 'scale(1)',
scale: '*=1.4286',
opacity: '1',
duration: 200,
easing: 'cubicBezier(0.25, 0.1, 0.25, 1)',
progress: '100',
},
],
initialStyle: {
transform: 'translateY(-1200px) scale(0.7)',
opacity: '0.7',
},
},
};TAB: backInLeft
export default {
backInLeft: {
title: 'Fly in from left',
group: {
name: 'entrance',
title: 'Entrance',
},
type: {
name: 'flyIn',
title: 'Fly in',
},
withTransform: true,
keyframes: [
{
transform: 'translateX(0px) scale(0.7)',
translateX: '+=2000',
scale: '*=1',
opacity: '0.7',
duration: 800,
easing: 'cubicBezier(0.25, 0.1, 0.25, 1)',
progress: '80',
},
{
transform: 'scale(1)',
scale: '*=1.4286',
opacity: '1',
duration: 200,
easing: 'cubicBezier(0.25, 0.1, 0.25, 1)',
progress: '100',
},
],
initialStyle: {
transform: 'translateX(-2000px) scale(0.7)',
opacity: '0.7',
},
},
};TAB: backInRight
export default {
backInRight: {
title: 'Fly in from right',
group: {
name: 'entrance',
title: 'Entrance',
},
type: {
name: 'flyIn',
title: 'Fly in',
},
withTransform: true,
keyframes: [
{
transform: 'translateX(0px) scale(0.7)',
translateX: '-=2000',
scale: '*=1',
opacity: '0.7',
duration: 800,
easing: 'cubicBezier(0.25, 0.1, 0.25, 1)',
progress: '80',
},
{
transform: 'scale(1)',
scale: '*=1.4286',
opacity: '1',
duration: 200,
easing: 'cubicBezier(0.25, 0.1, 0.25, 1)',
progress: '100',
},
],
initialStyle: {
transform: 'translateX(2000px) scale(0.7)',
opacity: '0.7',
},
},
};TAB: backInUp
export default {
backInUp: {
title: 'Fly in from bottom',
group: {
name: 'entrance',
title: 'Entrance',
},
type: {
name: 'flyIn',
title: 'Fly in',
},
withTransform: true,
keyframes: [
{
transform: 'translateY(0px) scale(0.7)',
translateY: '-=1200',
scale: '*=1',
opacity: '0.7',
duration: 800,
easing: 'cubicBezier(0.25, 0.1, 0.25, 1)',
progress: '80',
},
{
transform: 'scale(1)',
scale: '*=1.4286',
opacity: '1',
duration: 200,
easing: 'cubicBezier(0.25, 0.1, 0.25, 1)',
progress: '100',
},
],
initialStyle: {
transform: 'translateY(1200px) scale(0.7)',
opacity: '0.7',
},
},
};TAB: bounceIn
export default {
bounceIn: {
title: 'Bounce in',
group: {
name: 'entrance',
title: 'Entrance',
},
type: {
name: 'bounce',
title: 'Bounce',
},
withTransform: true,
keyframes: [
{
opacity: 0.33,
transform: 'scale3d(1.1, 1.1, 1.1)',
easing: 'cubicBezier(0.215, 0.61, 0.355, 1)',
duration: 200,
progress: '20',
scaleX: '*=3.6667',
scaleY: '*=3.6667',
scaleZ: '*=3.6667',
},
{
opacity: 0.66,
transform: 'scale3d(0.9, 0.9, 0.9)',
easing: 'cubicBezier(0.215, 0.61, 0.355, 1)',
duration: 200,
progress: '40',
scaleX: '*=0.8182',
scaleY: '*=0.8182',
scaleZ: '*=0.8182',
},
{
opacity: 1,
transform: 'scale3d(1.03, 1.03, 1.03)',
easing: 'cubicBezier(0.215, 0.61, 0.355, 1)',
duration: 200,
progress: '60',
scaleX: '*=1.1444',
scaleY: '*=1.1444',
scaleZ: '*=1.1444',
},
{
transform: 'scale3d(0.97, 0.97, 0.97)',
easing: 'cubicBezier(0.215, 0.61, 0.355, 1)',
duration: 200,
progress: '80',
scaleX: '*=0.9417',
scaleY: '*=0.9417',
scaleZ: '*=0.9417',
},
{
transform: 'scale3d(1, 1, 1)',
easing: 'cubicBezier(0.215, 0.61, 0.355, 1)',
duration: 200,
progress: '100',
scaleX: '*=1.0309',
scaleY: '*=1.0309',
scaleZ: '*=1.0309',
},
],
initialStyle: {
opacity: 0,
transform: 'scale3d(0.3, 0.3, 0.3)',
},
},
};TAB: bounceInDown
export default {
bounceInDown: {
title: 'Bounce from top',
group: {
name: 'entrance',
title: 'Entrance',
},
type: {
name: 'bounce',
title: 'Bounce',
},
withTransform: true,
keyframes: [
{
opacity: '1',
transform: 'translate3d(0, 25px, 0) scaleY(0.9)',
easing: 'cubicBezier(0.215, 0.61, 0.355, 1)',
duration: 600,
progress: '60',
translateX: '+=0',
translateY: '+=3025',
translateZ: '+=0',
scaleY: '*=0.3000',
},
{
transform: 'translate3d(0, -10px, 0) scaleY(0.95)',
easing: 'cubicBezier(0.215, 0.61, 0.355, 1)',
duration: 150,
progress: '75',
translateX: '+=0',
translateY: '+=-35',
translateZ: '+=0',
scaleY: '*=1.0556',
},
{
transform: 'translate3d(0, 5px, 0) scaleY(0.985)',
easing: 'cubicBezier(0.215, 0.61, 0.355, 1)',
duration: 150,
progress: '90',
translateX: '+=0',
translateY: '+=15',
translateZ: '+=0',
scaleY: '*=1.0368',
},
{
transform: 'translate3d(0, 0, 0)',
easing: 'cubicBezier(0.215, 0.61, 0.355, 1)',
duration: 100,
progress: '100',
translateX: '+=0',
translateY: '+=-5',
translateZ: '+=0',
scaleY: '*=1.0152',
},
],
initialStyle: {
opacity: '0',
transform: 'translate3d(0, -3000px, 0) scaleY(3)',
},
},
};TAB: bounceInLeft
export default {
bounceInLeft: {
title: 'Bounce from left',
group: {
name: 'entrance',
title: 'Entrance',
},
type: {
name: 'bounce',
title: 'Bounce',
},
withTransform: true,
keyframes: [
{
opacity: '1',
transform: 'translate3d(25px, 0, 0) scaleX(1)',
easing: 'cubicBezier(0.215, 0.61, 0.355, 1)',
duration: 600,
progress: '60',
translateX: '+=3025',
translateY: '+=0',
translateZ: '+=0',
scaleX: '*=0.3333',
},
{
transform: 'translate3d(-10px, 0, 0) scaleX(0.98)',
easing: 'cubicBezier(0.215, 0.61, 0.355, 1)',
duration: 150,
progress: '75',
translateX: '+=-35',
translateY: '+=0',
translateZ: '+=0',
scaleX: '*=0.9800',
},
{
transform: 'translate3d(5px, 0, 0) scaleX(0.995)',
easing: 'cubicBezier(0.215, 0.61, 0.355, 1)',
duration: 150,
progress: '90',
translateX: '+=15',
translateY: '+=0',
translateZ: '+=0',
scaleX: '*=1.0153',
},
{
transform: 'translate3d(0, 0, 0)',
easing: 'cubicBezier(0.215, 0.61, 0.355, 1)',
duration: 100,
progress: '100',
translateX: '+=-5',
translateY: '+=0',
translateZ: '+=0',
},
],
initialStyle: {
opacity: '0',
transform: 'translate3d(-3000px, 0, 0) scaleX(3)',
easing: 'cubicBezier(0.215, 0.61, 0.355, 1)',
},
},
};TAB: bounceInRight
export default {
bounceInRight: {
title: 'Bounce from right',
group: {
name: 'entrance',
title: 'Entrance',
},
type: {
name: 'bounce',
title: 'Bounce',
},
withTransform: true,
keyframes: [
{
opacity: '1',
transform: 'translate3d(-25px, 0, 0) scaleX(1)',
easing: 'cubicBezier(0.215, 0.61, 0.355, 1)',
duration: 600,
progress: '60',
translateX: '+=-3025',
translateY: '+=0',
translateZ: '+=0',
scaleX: '*=0.3333',
},
{
transform: 'translate3d(10px, 0, 0) scaleX(0.98)',
easing: 'cubicBezier(0.215, 0.61, 0.355, 1)',
duration: 150,
progress: '75',
translateX: '+=35',
translateY: '+=0',
translateZ: '+=0',
scaleX: '*=0.9800',
},
{
transform: 'translate3d(-5px, 0, 0) scaleX(0.995)',
easing: 'cubicBezier(0.215, 0.61, 0.355, 1)',
duration: 150,
progress: '90',
translateX: '+=-15',
translateY: '+=0',
translateZ: '+=0',
scaleX: '*=1.0153',
},
{
transform: 'translate3d(0, 0, 0)',
easing: 'cubicBezier(0.215, 0.61, 0.355, 1)',
duration: 100,
progress: '100',
translateX: '+=5',
translateY: '+=0',
translateZ: '+=0',
scaleX: '*=1.005',
},
],
initialStyle: {
opacity: '0',
transform: 'translate3d(3000px, 0, 0) scaleX(3)',
easing: 'cubicBezier(0.215, 0.61, 0.355, 1)',
},
},
};TAB: bounceInUp
export default {
bounceInUp: {
title: 'Bounce from bottom',
group: {
name: 'entrance',
title: 'Entrance',
},
type: {
name: 'bounce',
title: 'Bounce',
},
withTransform: true,
keyframes: [
{
opacity: '1',
transform: 'translate3d(0, -20px, 0) scaleY(0.9)',
easing: 'cubicBezier(0.215, 0.61, 0.355, 1)',
duration: 600,
progress: '60',
translateX: '+=0',
translateY: '+=-3020',
translateZ: '+=0',
scaleY: '*=0.1800',
},
{
transform: 'translate3d(0, 10px, 0) scaleY(0.95)',
easing: 'cubicBezier(0.215, 0.61, 0.355, 1)',
duration: 150,
progress: '75',
translateX: '+=0',
translateY: '+=30',
translateZ: '+=0',
scaleY: '*=1.0556',
},
{
transform: 'translate3d(0, -5px, 0) scaleY(0.985)',
easing: 'cubicBezier(0.215, 0.61, 0.355, 1)',
duration: 150,
progress: '90',
translateX: '+=0',
translateY: '+=-15',
translateZ: '+=0',
scaleY: '*=1.0368',
},
{
transform: 'translate3d(0, 0, 0)',
easing: 'cubicBezier(0.215, 0.61, 0.355, 1)',
duration: 100,
progress: '100',
translateX: '+=0',
translateY: '+=5',
translateZ: '+=0',
scaleY: '*=1.0152',
},
],
initialStyle: {
opacity: '0',
transform: 'translate3d(0, 3000px, 0) scaleY(5)',
easing: 'cubicBezier(0.215, 0.61, 0.355, 1)',
},
},
};TAB: fadeIn
export default {
fadeIn: {
title: 'Fade in',
group: {
name: 'entrance',
title: 'Entrance',
},
type: {
name: 'fade',
title: 'Fade',
},
withTransform: false,
keyframes: [
{
opacity: '1',
duration: 1000,
easing: 'cubicBezier(0.25, 0.1, 0.25, 1)',
progress: '100',
},
],
initialStyle: {
opacity: '0',
},
},
};TAB: fadeInBottomLeft
export default {
fadeInBottomLeft: {
title: 'Fade from bottom-left',
group: {
name: 'entrance',
title: 'Entrance',
},
type: {
name: 'fade',
title: 'Fade',
},
withTransform: true,
percentageTranslate: true,
keyframes: [
{
opacity: '1',
translateX: '+=100%',
translateY: '-=100%',
duration: 1000,
easing: 'cubicBezier(0.25, 0.1, 0.25, 1)',
progress: '100',
},
],
initialStyle: {
opacity: '0',
transform: 'translate3d(-100%, 100%, 0)',
},
},
};TAB: fadeInBottomRight
export default {
fadeInBottomRight: {
title: 'Fade from bottom-right',
group: {
name: 'entrance',
title: 'Entrance',
},
type: {
name: 'fade',
title: 'Fade',
},
withTransform: true,
percentageTranslate: true,
keyframes: [
{
opacity: '1',
transform: 'translate3d(0, 0, 0)',
translateX: '-=100%',
translateY: '-=100%',
duration: 1000,
easing: 'cubicBezier(0.25, 0.1, 0.25, 1)',
progress: '100',
},
],
initialStyle: {
opacity: '0',
transform: 'translate3d(100%, 100%, 0)',
},
},
};TAB: fadeInDown
export default {
fadeInDown: {
title: 'Fade from top',
group: {
name: 'entrance',
title: 'Entrance',
},
type: {
name: 'fade',
title: 'Fade',
},
withTransform: true,
percentageTranslate: true,
keyframes: [
{
opacity: '1',
transform: 'translate3d(0, 0, 0)',
translateY: '+=100%',
duration: 1000,
easing: 'cubicBezier(0.25, 0.1, 0.25, 1)',
progress: '100',
},
],
initialStyle: {
opacity: '0',
transform: 'translate3d(0, -100%, 0)',
},
},
};TAB: fadeInLeft
export default {
fadeInLeft: {
title: 'Fade from left',
group: {
name: 'entrance',
title: 'Entrance',
},
type: {
name: 'fade',
title: 'Fade',
},
withTransform: true,
percentageTranslate: true,
keyframes: [
{
opacity: '1',
transform: 'translate3d(0, 0, 0)',
translateX: '+=100%',
duration: 1000,
easing: 'cubicBezier(0.25, 0.1, 0.25, 1)',
progress: '100',
},
],
initialStyle: {
opacity: '0',
transform: 'translate3d(-100%, 0, 0)',
},
},
};TAB: fadeInRight
export default {
fadeInRight: {
title: 'Fade from right',
group: {
name: 'entrance',
title: 'Entrance',
},
type: {
name: 'fade',
title: 'Fade',
},
withTransform: true,
percentageTranslate: true,
keyframes: [
{
opacity: '1',
transform: 'translate3d(0, 0, 0)',
translateX: '-=100%',
duration: 1000,
easing: 'cubicBezier(0.25, 0.1, 0.25, 1)',
progress: '100',
},
],
initialStyle: {
opacity: '0',
transform: 'translate3d(100%, 0, 0)',
},
},
};TAB: fadeInTopLeft
export default {
fadeInTopLeft: {
title: 'Fade from top-left',
group: {
name: 'entrance',
title: 'Entrance',
},
type: {
name: 'fade',
title: 'Fade',
},
withTransform: true,
percentageTranslate: true,
keyframes: [
{
opacity: '1',
transform: 'translate3d(0, 0, 0)',
translateX: '+=100%',
translateY: '+=100%',
duration: 1000,
easing: 'cubicBezier(0.25, 0.1, 0.25, 1)',
progress: '100',
},
],
initialStyle: {
opacity: '0',
transform: 'translate3d(-100%, -100%, 0)',
},
},
};TAB: fadeInTopRight
export default {
fadeInTopRight: {
title: 'Fade from top-right',
group: {
name: 'entrance',
title: 'Entrance',
},
type: {
name: 'fade',
title: 'Fade',
},
withTransform: true,
percentageTranslate: true,
keyframes: [
{
opacity: '1',
transform: 'translate3d(0, 0, 0)',
translateX: '-=100%',
translateY: '+=100%',
duration: 1000,
easing: 'cubicBezier(0.25, 0.1, 0.25, 1)',
progress: '100',
},
],
initialStyle: {
opacity: '0',
transform: 'translate3d(100%, -100%, 0)',
},
},
};TAB: fadeInUp
export default {
fadeInUp: {
title: 'Fade from bottom',
group: {
name: 'entrance',
title: 'Entrance',
},
type: {
name: 'fade',
title: 'Fade',
},
withTransform: true,
percentageTranslate: true,
keyframes: [
{
opacity: '1',
transform: 'translate3d(0, 0, 0)',
translateY: '-=100%',
duration: 1000,
easing: 'cubicBezier(0.25, 0.1, 0.25, 1)',
progress: '100',
},
],
initialStyle: {
opacity: '0',
transform: 'translate3d(0, 100%, 0)',
},
},
};TAB: rotateIn
export default {
rotateIn: {
title: 'Rotate in',
group: {
name: 'entrance',
title: 'Entrance',
},
type: {
name: 'rotate',
title: 'Rotate',
},
withTransform: true,
keyframes: [
{
transform: 'translate3d(0, 0, 0)',
rotateZ: '+=200',
opacity: '1',
duration: 1000,
easing: 'cubicBezier(0.25, 0.1, 0.25, 1)',
progress: '100',
},
],
initialStyle: {
transform: 'rotate3d(0, 0, 1, -200deg)',
transformOrigin: 'center',
opacity: '0',
},
},
};TAB: rotateInDownLeft
export default {
rotateInDownLeft: {
title: 'Rotate from top-left',
group: {
name: 'entrance',
title: 'Entrance',
},
type: {
name: 'rotate',
title: 'Rotate',
},
withTransform: true,
keyframes: [
{
transform: 'translate3d(0, 0, 0)',
rotateZ: '+=45',
opacity: '1',
duration: 1000,
easing: 'cubicBezier(0.25, 0.1, 0.25, 1)',
progress: '100',
},
],
initialStyle: {
transform: 'rotate3d(0, 0, 1, -45deg)',
transformOrigin: 'left bottom',
opacity: '0',
},
},
};TAB: rotateInDownRight
export default {
rotateInDownRight: {
title: 'Rotate from top-right',
group: {
name: 'entrance',
title: 'Entrance',
},
type: {
name: 'rotate',
title: 'Rotate',
},
withTransform: true,
keyframes: [
{
transform: 'translate3d(0, 0, 0)',
rotateZ: '-=45',
opacity: '1',
duration: 1000,
easing: 'cubicBezier(0.25, 0.1, 0.25, 1)',
progress: '100',
},
],
initialStyle: {
transform: 'rotate3d(0, 0, 1, 45deg)',
transformOrigin: 'right bottom',
opacity: '0',
},
},
};TAB: rotateInUpLeft
export default {
rotateInUpLeft: {
title: 'Rotate from bottom-left',
group: {
name: 'entrance',
title: 'Entrance',
},
type: {
name: 'rotate',
title: 'Rotate',
},
withTransform: true,
keyframes: [
{
transform: 'translate3d(0, 0, 0)',
rotateZ: '-=45',
opacity: '1',
duration: 1000,
easing: 'cubicBezier(0.25, 0.1, 0.25, 1)',
progress: '100',
},
],
initialStyle: {
transform: 'rotate3d(0, 0, 1, 45deg)',
transformOrigin: 'left bottom',
opacity: '0',
},
},
};TAB: rotateInUpRight
export default {
rotateInUpRight: {
title: 'Rotate from bottom-right',
group: {
name: 'entrance',
title: 'Entrance',
},
type: {
name: 'rotate',
title: 'Rotate',
},
withTransform: true,
keyframes: [
{
transform: 'translate3d(0, 0, 0)',
rotateZ: '+=90',
opacity: '1',
duration: 1000,
easing: 'cubicBezier(0.25, 0.1, 0.25, 1)',
progress: '100',
},
],
initialStyle: {
transform: 'rotate3d(0, 0, 1, -90deg)',
transformOrigin: 'right bottom',
opacity: '0',
},
},
};TAB: slideInDown
export default {
slideInDown: {
title: 'Slide down',
group: {
name: 'entrance',
title: 'Entrance',
},
type: {
name: 'slide',
title: 'Slide',
},
withTransform: true,
percentageTranslate: true,
keyframes: [
{
transform: 'translate3d(0, 0, 0)',
translateY: '+=100%',
duration: 1000,
easing: 'cubicBezier(0.25, 0.1, 0.25, 1)',
progress: '100',
},
],
initialStyle: {
transform: 'translate3d(0, -100%, 0)',
visibility: 'visible',
},
},
};TAB: slideInLeft
export default {
slideInLeft: {
title: 'Slide from left',
group: {
name: 'entrance',
title: 'Entrance',
},
type: {
name: 'slide',
title: 'Slide',
},
withTransform: true,
percentageTranslate: true,
keyframes: [
{
transform: 'translate3d(0, 0, 0)',
translateX: '+=100%',
duration: 1000,
easing: 'cubicBezier(0.25, 0.1, 0.25, 1)',
progress: '100',
},
],
initialStyle: {
transform: 'translate3d(-100%, 0, 0)',
visibility: 'visible',
},
},
};TAB: slideInRight
export default {
slideInRight: {
title: 'Slide from right',
group: {
name: 'entrance',
title: 'Entrance',
},
type: {
name: 'slide',
title: 'Slide',
},
withTransform: true,
percentageTranslate: true,
keyframes: [
{
transform: 'translate3d(0, 0, 0)',
translateX: '-=100%',
duration: 1000,
easing: 'cubicBezier(0.25, 0.1, 0.25, 1)',
progress: '100',
},
],
initialStyle: {
transform: 'translate3d(100%, 0, 0)',
visibility: 'visible',
},
},
};TAB: slideInUp
export default {
slideInUp: {
title: 'Slide up',
group: {
name: 'entrance',
title: 'Entrance',
},
type: {
name: 'slide',
title: 'Slide',
},
withTransform: true,
percentageTranslate: true,
keyframes: [
{
transform: 'translate3d(0, 0, 0)',
translateY: '-=100%',
duration: 1000,
easing: 'cubicBezier(0.25, 0.1, 0.25, 1)',
progress: '100',
},
],
initialStyle: {
transform: 'translate3d(0, 100%, 0)',
visibility: 'visible',
},
},
};TAB: zoomIn
export default {
zoomIn: {
title: 'Zoom in',
group: {
name: 'entrance',
title: 'Entrance',
},
type: {
name: 'zoom',
title: 'Zoom',
},
withTransform: true,
keyframes: [
{
scaleX: '*=3.33',
scaleY: '*=3.33',
scaleZ: '*=3.33',
opacity: '1',
duration: 1000,
easing: 'cubicBezier(0.25, 0.1, 0.25, 1)',
progress: '100',
},
],
initialStyle: {
opacity: '0',
transform: 'scale3d(0.3, 0.3, 0.3)',
},
},
};TAB: zoomInDown
export default {
zoomInDown: {
title: 'Zoom from top',
group: {
name: 'entrance',
title: 'Entrance',
},
type: {
name: 'zoom',
title: 'Zoom',
},
withTransform: true,
keyframes: [
{
opacity: '1',
transform: 'scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0)',
easing: 'cubicBezier(0.55, 0.055, 0.675, 0.19)',
duration: 600,
progress: '60',
translateX: '+=0',
translateY: '+=106',
translateZ: '+=0',
scaleX: '*=4.7500',
scaleY: '*=4.7500',
scaleZ: '*=4.7500',
},
{
opacity: '1',
transform: 'scale3d(1, 1, 1) translate3d(0, 0, 0)',
easing: 'cubicBezier(0.175, 0.885, 0.32, 1)',
duration: 400,
progress: '100',
translateX: '+=0',
translateY: '+=-6',
translateZ: '+=0',
scaleX: '*=2.1053',
scaleY: '*=2.1053',
scaleZ: '*=2.1053',
},
],
initialStyle: {
opacity: '0',
transform: 'scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0)',
},
},
};TAB: zoomInLeft
export default {
zoomInLeft: {
title: 'Zoom from left',
group: {
name: 'entrance',
title: 'Entrance',
},
type: {
name: 'zoom',
title: 'Zoom',
},
withTransform: true,
keyframes: [
{
opacity: '1',
transform: 'scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0)',
easing: 'cubicBezier(0.55, 0.055, 0.675, 0.19)',
duration: 600,
progress: '60',
translateX: '+=101',
translateY: '+=0',
translateZ: '+=0',
scaleX: '*=4.7500',
scaleY: '*=4.7500',
scaleZ: '*=4.7500',
},
{
opacity: '1',
transform: 'scale3d(1, 1, 1) translate3d(0, 0, 0)',
easing: 'cubicBezier(0.175, 0.885, 0.32, 1)',
duration: 400,
progress: '100',
translateX: '+=-1',
translateY: '+=0',
translateZ: '+=0',
scaleX: '*=2.1053',
scaleY: '*=2.1053',
scaleZ: '*=2.1053',
},
],
initialStyle: {
opacity: '0',
transform: 'scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0)',
},
},
};TAB: zoomInRight
export default {
zoomInRight: {
title: 'Zoom from right',
group: {
name: 'entrance',
title: 'Entrance',
},
type: {
name: 'zoom',
title: 'Zoom',
},
withTransform: true,
keyframes: [
{
opacity: '1',
transform: 'scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0)',
easing: 'cubicBezier(0.55, 0.055, 0.675, 0.19)',
duration: 600,
progress: '60',
translateX: '+=-101',
translateY: '+=0',
translateZ: '+=0',
scaleX: '*=4.7500',
scaleY: '*=4.7500',
scaleZ: '*=4.7500',
},
{
opacity: '1',
transform: 'scale3d(1, 1, 1) translate3d(0, 0, 0)',
easing: 'cubicBezier(0.175, 0.885, 0.32, 1)',
duration: 400,
progress: '100',
translateX: '+=1',
translateY: '+=0',
translateZ: '+=0',
scaleX: '*=2.1053',
scaleY: '*=2.1053',
scaleZ: '*=2.1053',
},
],
initialStyle: {
opacity: '0',
transform: 'scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0)',
},
},
};TAB: zoomInUp
export default {
zoomInUp: {
title: 'Zoom from bottom',
group: {
name: 'entrance',
title: 'Entrance',
},
type: {
name: 'zoom',
title: 'Zoom',
},
withTransform: true,
keyframes: [
{
opacity: '1',
transform: 'scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0)',
easing: 'cubicBezier(0.55, 0.055, 0.675, 0.19)',
duration: 600,
progress: '60',
translateX: '+=0',
translateY: '+=-106',
translateZ: '+=0',
scaleX: '*=4.7500',
scaleY: '*=4.7500',
scaleZ: '*=4.7500',
},
{
opacity: '1',
transform: 'scale3d(1, 1, 1) translate3d(0, 0, 0)',
easing: 'cubicBezier(0.175, 0.885, 0.32, 1)',
duration: 400,
progress: '100',
translateX: '+=0',
translateY: '+=6',
translateZ: '+=0',
scaleX: '*=2.1053',
scaleY: '*=2.1053',
scaleZ: '*=2.1053',
},
],
initialStyle: {
opacity: '0',
transform: 'scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0)',
},
},
};---:
Emphasis
:--- TABS:
TAB: bounce
export default {
bounce: {
title: 'Bounce',
group: {
name: 'emphasis',
title: 'Emphasis',
},
type: {
name: 'bounce',
title: 'Bounce',
},
withTransform: true,
keyframes: [
{
transform: 'translate3d(0, -30px, 0) scaleY(1.1)',
translateY: '+=-30',
scaleY: '*=1.1000',
duration: 250,
easing: 'cubicBezier(0.215, 0.61, 0.355, 1)',
progress: '40',
translateX: '+=0',
translateZ: '+=0',
},
{
transform: 'translate3d(0, 0, 0)',
translateY: '+=30',
duration: 125,
delay: 37.5,
easing: 'cubicBezier(0.755, 0.05, 0.855, 0.06)',
progress: '53',
translateX: '+=0',
translateZ: '+=0',
},
{
transform: 'translate3d(0, -15px, 0) scaleY(1.05)',
translateY: '+=-15',
scaleY: '*=1.0500',
duration: 212.5,
easing: 'cubicBezier(0.215, 0.61, 0.355, 1)',
progress: '70',
translateX: '+=0',
translateZ: '+=0',
},
{
transform: 'translate3d(0, 0, 0) scaleY(0.95)',
translateY: '+=15',
duration: 125,
easing: 'cubicBezier(0.755, 0.05, 0.855, 0.06)',
progress: '80',
translateX: '+=0',
translateZ: '+=0',
scaleY: '*=0.9048',
},
{
transform: 'translate3d(0, -4px, 0) scaleY(1.02)',
translateY: '+=-4',
scaleY: '*=1.0737',
duration: 125,
easing: 'cubicBezier(0.215, 0.61, 0.355, 1)',
progress: '90',
translateX: '+=0',
translateZ: '+=0',
},
{
easing: 'cubicBezier(0.25, 0.1, 0.25, 1)',
translateY: '+=4',
scaleY: '/=1.02',
transform: 'translate3d(0, 0, 0)',
duration: 125,
progress: '100',
translateX: '+=0',
translateZ: '+=0',
},
],
},
};TAB: heartBeat
export default {
heartBeat: {
title: 'Heartbeat',
group: {
name: 'emphasis',
title: 'Emphasis',
},
type: {
name: 'heartBeat',
title: 'Heartbeat',
},
withTransform: true,
keyframes: [
{
transform: 'scale(1.3)',
scale: '*=1.3',
duration: 200,
easing: 'cubicBezier(0.25, 0.1, 0.25, 1)',
progress: '14',
},
{
transform: 'scale(1)',
scale: '*=0.7692',
duration: 200,
easing: 'cubicBezier(0.25, 0.1, 0.25, 1)',
progress: '28',
},
{
transform: 'scale(1.3)',
scale: '*=1.3',
duration: 200,
easing: 'cubicBezier(0.25, 0.1, 0.25, 1)',
progress: '42',
},
{
transform: 'scale(1)',
scale: '*=0.7692',
duration: 400,
easing: 'cubicBezier(0.25, 0.1, 0.25, 1)',
progress: '70',
},
],
},
};TAB: pulse
export default {
pulse: {
title: 'Pulse',
group: {
name: 'emphasis',
title: 'Emphasis',
},
type: {
name: 'pulse',
title: 'Pulse',
},
withTransform: true,
keyframes: [
{
transform: 'scale3d(1.05, 1.05, 1.05)',
scaleX: '*=1.0500',
scaleY: '*=1.0500',
scaleZ: '*=1.0500',
duration: 500,
easing: 'cubicBezier(0.25, 0.1, 0.25, 1)',
progress: '50',
},
{
transform: 'scale3d(1, 1, 1)',
scaleX: '*=0.9524',
scaleY: '*=0.9524',
scaleZ: '*=0.9524',
duration: 500,
easing: 'cubicBezier(0.25, 0.1, 0.25, 1)',
progress: '100',
},
],
},
};TAB: rubberBand
export default {
rubberBand: {
title: 'Rubber',
group: {
name: 'emphasis',
title: 'Emphasis',
},
type: {
name: 'rubber',
title: 'Rubber',
},
withTransform: true,
keyframes: [
{
transform: 'scale3d(1.25, 0.75, 1)',
scaleX: '*=1.2500',
scaleY: '*=0.7500',
duration: 300,
easing: 'cubicBezier(0.25, 0.1, 0.25, 1)',
progress: '30',
scaleZ: '*=1.0000',
},
{
transform: 'scale3d(0.75, 1.25, 1)',
scaleX: '*=0.6000',
scaleY: '*=1.6667',
duration: 100,
easing: 'cubicBezier(0.25, 0.1, 0.25, 1)',
progress: '40',
scaleZ: '*=1.0000',
},
{
transform: 'scale3d(1.15, 0.85, 1)',
scaleX: '*=1.5333',
scaleY: '*=0.6800',
duration: 100,
easing: 'cubicBezier(0.25, 0.1, 0.25, 1)',
progress: '50',
scaleZ: '*=1.0000',
},
{
transform: 'scale3d(0.95, 1.05, 1)',
scaleX: '*=0.8261',
scaleY: '*=1.2353',
duration: 150,
easing: 'cubicBezier(0.25, 0.1, 0.25, 1)',
progress: '65',
scaleZ: '*=1.0000',
},
{
transform: 'scale3d(1.05, 0.95, 1)',
scaleX: '*=1.1053',
scaleY: '*=0.9048',
duration: 100,
easing: 'cubicBezier(0.25, 0.1, 0.25, 1)',
progress: '75',
scaleZ: '*=1.0000',
},
{
transform: 'scale3d(1, 1, 1)',
scaleX: '*=0.9524',
scaleY: '*=1.0526',
duration: 250,
easing: 'cubicBezier(0.25, 0.1, 0.25, 1)',
progress: '100',
scaleZ: '*=1.0000',
},
],
},
};TAB: shakeX
export default {
shakeX: {
title: 'Shake X',
group: {
name: 'emphasis',
title: 'Emphasis',
},
type: {
name: 'shakeX',
title: 'Shake X',
},
withTransform: true,
keyframes: [
{
transform: 'translate3d(-10px, 0, 0)',
duration: 100,
easing: 'cubicBezier(0.25, 0.1, 0.25, 1)',
progress: '10',
translateX: '+=-10',
translateY: '+=0',
translateZ: '+=0',
},
{
transform: 'translate3d(10px, 0, 0)',
duration: 100,
easing: 'cubicBezier(0.25, 0.1, 0.25, 1)',
progress: '20',
translateX: '+=20',
translateY: '+=0',
translateZ: '+=0',
},
{
transform: 'translate3d(-10px, 0, 0)',
duration: 100,
easing: 'cubicBezier(0.25, 0.1, 0.25, 1)',
progress: '30',
translateX: '+=-20',
translateY: '+=0',
translateZ: '+=0',
},
{
transform: 'translate3d(10px, 0, 0)',
duration: 100,
easing: 'cubicBezier(0.25, 0.1, 0.25, 1)',
progress: '40',
translateX: '+=20',
translateY: '+=0',
translateZ: '+=0',
},
{
transform: 'translate3d(-10px, 0, 0)',
duration: 100,
easing: 'cubicBezier(0.25, 0.1, 0.25, 1)',
progress: '50',
translateX: '+=-20',
translateY: '+=0',
translateZ: '+=0',
},
{
transform: 'translate3d(10px, 0, 0)',
duration: 100,
easing: 'cubicBezier(0.25, 0.1, 0.25, 1)',
progress: '60',
translateX: '+=20',
translateY: '+=0',
translateZ: '+=0',
},
{
transform: 'translate3d(-10px, 0, 0)',
duration: 100,
easing: 'cubicBezier(0.25, 0.1, 0.25, 1)',
progress: '70',
translateX: '+=-20',
translateY: '+=0',
translateZ: '+=0',
},
{
transform: 'translate3d(10px, 0, 0)',
duration: 100,
easing: 'cubicBezier(0.25, 0.1, 0.25, 1)',
progress: '80',
translateX: '+=20',
translateY: '+=0',
translateZ: '+=0',
},
{
transform: 'translate3d(-10px, 0, 0)',
duration: 100,
easing: 'cubicBezier(0.25, 0.1, 0.25, 1)',
progress: '90',
translateX: '+=-20',
translateY: '+=0',
translateZ: '+=0',
},
{
transform: 'translate3d(0, 0, 0)',
duration: 100,
easing: 'cubicBezier(0.25, 0.1, 0.25, 1)',
progress: '100',
translateX: '+=10',
translateY: '+=0',
translateZ: '+=0',
},
],
},
};TAB: shakeY
export default {
shakeY: {
title: 'Shake Y',
group: {
name: 'emphasis',
title: 'Emphasis',
},
type: {
name: 'shakeY',
title: 'Shake Y',
},
withTransform: true,
keyframes: [
{
transform: 'translate3d(0, -10px, 0)',
duration: 100,
easing: 'cubicBezier(0.25, 0.1, 0.25, 1)',
progress: '10',
translateX: '+=0',
translateY: '+=-10',
translateZ: '+=0',
},
{
transform: 'translate3d(0, 10px, 0)',
duration: 100,
easing: 'cubicBezier(0.25, 0.1, 0.25, 1)',
progress: '20',
translateX: '+=0',
translateY: '+=20',
translateZ: '+=0',
},
{
transform: 'translate3d(0, -10px, 0)',
duration: 100,
easing: 'cubicBezier(0.25, 0.1, 0.25, 1)',
progress: '30',
translateX: '+=0',
translateY: '+=-20',
translateZ: '+=0',
},
{
transform: 'translate3d(0, 10px, 0)',
duration: 100,
easing: 'cubicBezier(0.25, 0.1, 0.25, 1)',
progress: '40',
translateX: '+=0',
translateY: '+=20',
translateZ: '+=0',
},
{
transform: 'translate3d(0, -10px, 0)',
duration: 100,
easing: 'cubicBezier(0.25, 0.1, 0.25, 1)',
progress: '50',
translateX: '+=0',
translateY: '+=-20',
translateZ: '+=0',
},
{
transform: 'translate3d(0, 10px, 0)',
duration: 100,
easing: 'cubicBezier(0.25, 0.1, 0.25, 1)',
progress: '60',
translateX: '+=0',
translateY: '+=20',
translateZ: '+=0',
},
{
transform: 'translate3d(0, -10px, 0)',
duration: 100,
easing: 'cubicBezier(0.25, 0.1, 0.25, 1)',
progress: '70',
translateX: '+=0',
translateY: '+=-20',
translateZ: '+=0',
},
{
transform: 'translate3d(0, 10px, 0)',
duration: 100,
easing: 'cubicBezier(0.25, 0.1, 0.25, 1)',
progress: '80',
translateX: '+=0',
translateY: '+=20',
translateZ: '+=0',
},
{
transform: 'translate3d(0, -10px, 0)',
duration: 100,
easing: 'cubicBezier(0.25, 0.1, 0.25, 1)',
progress: '90',
translateX: '+=0',
translateY: '+=-20',
translateZ: '+=0',
},
{
transform: 'translate3d(0, 0, 0)',
duration: 100,
easing: 'cubicBezier(0.25, 0.1, 0.25, 1)',
progress: '100',
translateX: '+=0',
translateY: '+=10',
translateZ: '+=0',
},
],
},
};TAB: swing
export default {
swing: {
title: 'Swing',
group: {
name: 'emphasis',
title: 'Emphasis',
},
type: {
name: 'swing',
title: 'Swing',
},
withTransform: true,
keyframes: [
{
transform: 'rotate3d(0, 0, 1, 15deg)',
rotateZ: '+=15',
duration: 200,
easing: 'cubicBezier(0.25, 0.1, 0.25, 1)',
progress: '20',
},
{
transform: 'rotate3d(0, 0, 1, -10deg)',
rotateZ: '+=-25',
duration: 200,
easing: 'cubicBezier(0.25, 0.1, 0.25, 1)',
progress: '40',
},
{
transform: 'rotate3d(0, 0, 1, 5deg)',
rotateZ: '+=15',
duration: 200,
easing: 'cubicBezier(0.25, 0.1, 0.25, 1)',
progress: '60',
},
{
transform: 'rotate3d(0, 0, 1, -5deg)',
rotateZ: '+=-10',
duration: 200,
easing: 'cubicBezier(0.25, 0.1, 0.25, 1)',
progress: '80',
},
{
transform: 'rotate3d(0, 0, 1, 0deg)',
rotateZ: '+=5',
duration: 200,
easing: 'cubicBezier(0.25, 0.1, 0.25, 1)',
progress: '100',
},
],
initialStyle: {
transformOrigin: 'top center',
},
},
};---:
Exit
:--- TABS:
TAB: backOutDown
export default {
backOutDown: {
title: 'Fly out to bottom',
group: {
name: 'exit',
title: 'Exit',
},
type: {
name: 'flyOut',
title: 'Fly out',
},
withTransform: true,
keyframes: [
{
transform: 'translateY(0px) scale(0.7)',
scale: '*=0.7',
opacity: '0.7',
duration: 200,
easing: 'cubicBezier(0.25, 0.1, 0.25, 1)',
progress: '20',
},
{
transform: 'translateY(700px) scale(0.7)',
translateY: '+=700',
scale: '*=1',
opacity: '0.7',
duration: 800,
easing: 'cubicBezier(0.25, 0.1, 0.25, 1)',
progress: '100',
},
],
},
};TAB: backOutLeft
export default {
backOutLeft: {
title: 'Fly out to left',
group: {
name: 'exit',
title: 'Exit',
},
type: {
name: 'flyOut',
title: 'Fly out',
},
withTransform: true,
keyframes: [
{
transform: 'translateX(0px) scale(0.7)',
scale: '*=0.7',
opacity: '0.7',
duration: 200,
easing: 'cubicBezier(0.25, 0.1, 0.25, 1)',
progress: '20',
},
{
transform: 'translateX(-2000px) scale(0.7)',
translateX: '-=2000',
opacity: '0.7',
duration: 800,
easing: 'cubicBezier(0.25, 0.1, 0.25, 1)',
progress: '100',
},
],
},
};TAB: backOutUp
export default {
backOutUp: {
title: 'Fly out to top',
group: {
name: 'exit',
title: 'Exit',
},
type: {
name: 'flyOut',
title: 'Fly out',
},
withTransform: true,
keyframes: [
{
transform: 'translateY(0px) scale(0.7)',
scale: '*=0.7',
opacity: '0.7',
duration: 200,
easing: 'cubicBezier(0.25, 0.1, 0.25, 1)',
progress: '20',
},
{
transform: 'translateY(-700px) scale(0.7)',
translateY: '-=700',
opacity: '0.7',
duration: 800,
easing: 'cubicBezier(0.25, 0.1, 0.25, 1)',
progress: '100',
},
],
},
};TAB: bounceOut
export default {
bounceOut: {
title: 'Bounce out',
group: {
name: 'exit',
title: 'Exit',
},
type: {
name: 'bounce',
title: 'Bounce',
},
withTransform: true,
keyframes: [
{
transform: 'scale3d(0.9, 0.9, 0.9)',
duration: 200,
easing: 'cubicBezier(0.25, 0.1, 0.25, 1)',
progress: '20',
scaleX: '*=0.9000',
scaleY: '*=0.9000',
scaleZ: '*=0.9000',
},
{
opacity: '1',
transform: 'scale3d(1.1, 1.1, 1.1)',
duration: 300,
easing: 'cubicBezier(0.25, 0.1, 0.25, 1)',
progress: '50',
scaleX: '*=1.2222',
scaleY: '*=1.2222',
scaleZ: '*=1.2222',
},
{
opacity: '0',
transform: 'scale3d(0.3, 0.3, 0.3)',
duration: 450,
easing: 'cubicBezier(0.25, 0.1, 0.25, 1)',
delay: 50,
progress: '100',
scaleX: '*=0.2727',
scaleY: '*=0.2727',
scaleZ: '*=0.2727',
},
],
},
};TAB: bounceOutDown
export default {
bounceOutDown: {
title: 'Bounce to bottom',
group: {
name: 'exit',
title: 'Exit',
},
type: {
name: 'bounce',
title: 'Bounce',
},
withTransform: true,
keyframes: [
{
transform: 'translate3d(0, 10px, 0) scaleY(0.985)',
duration: 200,
easing: 'cubicBezier(0.25, 0.1, 0.25, 1)',
progress: '20',
translateX: '+=0',
translateY: '+=10',
translateZ: '+=0',
scaleY: '*=0.9850',
},
{
opacity: '1',
transform: 'translate3d(0, -20px, 0) scaleY(0.9)',
duration: 200,
easing: 'cubicBezier(0.25, 0.1, 0.25, 1)',
progress: '40',
translateX: '+=0',
translateY: '+=-30',
translateZ: '+=0',
scaleY: '*=0.9137',
},
{
opacity: '0',
transform: 'translate3d(0, 2000px, 0) scaleY(3)',
duration: 550,
easing: 'cubicBezier(0.25, 0.1, 0.25, 1)',
delay: 50,
progress: '100',
translateX: '+=0',
translateY: '+=2020',
translateZ: '+=0',
scaleY: '*=3.3333',
},
],
},
};TAB: bounceOutLeft
export default {
bounceOutLeft: {
title: 'Bounce to left',
group: {
name: 'exit',
title: 'Exit',
},
type: {
name: 'bounce',
title: 'Bounce',
},
withTransform: true,
keyframes: [
{
opacity: '1',
transform: 'translate3d(20px, 0, 0) scaleX(0.9)',
duration: 200,
easing: 'cubicBezier(0.25, 0.1, 0.25, 1)',
progress: '20',
translateX: '+=20',
translateY: '+=0',
translateZ: '+=0',
scaleX: '*=0.9000',
},
{
opacity: '0',
transform: 'translate3d(-2000px, 0, 0) scaleX(2)',
duration: 800,
easing: 'cubicBezier(0.25, 0.1, 0.25, 1)',
progress: '100',
translateX: '+=-2020',
translateY: '+=0',
translateZ: '+=0',
scaleX: '*=2.2222',
},
],
},
};TAB: bounceOutRight
export default {
bounceOutRight: {
title: 'Bounce to right',
group: {
name: 'exit',
title: 'Exit',
},
type: {
name: 'bounce',
title: 'Bounce',
},
withTransform: true,
keyframes: [
{
opacity: '1',
transform: 'translate3d(-20px, 0, 0) scaleX(0.9)',
duration: 200,
easing: 'cubicBezier(0.25, 0.1, 0.25, 1)',
progress: '20',
translateX: '+=-20',
translateY: '+=0',
translateZ: '+=0',
scaleX: '*=0.9000',
},
{
opacity: '0',
transform: 'translate3d(2000px, 0, 0) scaleX(2)',
duration: 800,
easing: 'cubicBezier(0.25, 0.1, 0.25, 1)',
progress: '100',
translateX: '+=2020',
translateY: '+=0',
translateZ: '+=0',
scaleX: '*=2.2222',
},
],
},
};TAB: bounceOutUp
export default {
bounceOutUp: {
title: 'Bounce to top',
group: {
name: 'exit',
title: 'Exit',
},
type: {
name: 'bounce',
title: 'Bounce',
},
withTransform: true,
keyframes: [
{
transform: 'translate3d(0, -10px, 0) scaleY(0.985)',
duration: 200,
easing: 'cubicBezier(0.25, 0.1, 0.25, 1)',
progress: '20',
translateX: '+=0',
translateY: '+=-10',
translateZ: '+=0',
scaleY: '*=0.9850',
},
{
opacity: '1',
transform: 'translate3d(0, 20px, 0) scaleY(0.9)',
duration: 200,
easing: 'cubicBezier(0.25, 0.1, 0.25, 1)',
progress: '40',
translateX: '+=0',
translateY: '+=30',
translateZ: '+=0',
scaleY: '*=0.9137',
},
{
opacity: '0',
transform: 'translate3d(0, -2000px, 0) scaleY(3)',
duration: 550,
easing: 'cubicBezier(0.25, 0.1, 0.25, 1)',
delay: 50,
progress: '100',
translateX: '+=0',
translateY: '+=-2020',
translateZ: '+=0',
scaleY: '*=3.3333',
},
],
},
};TAB: fadeOut
export default {
fadeOut: {
title: 'Fade out',
group: {
name: 'exit',
title: 'Exit',
},
type: {
name: 'fade',
title: 'Fade',
},
withTransform: false,
keyframes: [
{
opacity: '0',
duration: 1000,
easing: 'cubicBezier(0.25, 0.1, 0.25, 1)',
progress: '100',
},
],
initialStyle: {
opacity: '1',
},
},
};TAB: fadeOutBottomLeft
export default {
fadeOutBottomLeft: {
title: 'Fade to bottom-left',
group: {
name: 'exit',
title: 'Exit',
},
type: {
name: 'fade',
title: 'Fade',
},
withTransform: true,
percentageTranslate: true,
keyframes: [
{
opacity: '0',
transform: 'translate3d(-100%, 100%, 0)',
translateX: '-=100%',
translateY: '+=100%',
duration: 1000,
easing: 'cubicBezier(0.25, 0.1, 0.25, 1)',
progress: '100',
},
],
initialStyle: {
opacity: '1',
},
},
};TAB: fadeOutBottomRight
export default {
fadeOutBottomRight: {
title: 'Fade to bottom-right',
group: {
name: 'exit',
title: 'Exit',
},
type: {
name: 'fade',
title: 'Fade',
},
withTransform: true,
percentageTranslate: true,
keyframes: [
{
opacity: '0',
transform: 'translate3d(100%, 100%, 0)',
translateX: '+=100%',
translateY: '+=100%',
duration: 1000,
easing: 'cubicBezier(0.25, 0.1, 0.25, 1)',
progress: '100',
},
],
initialStyle: {
opacity: '1',
},
},
};TAB: fadeOutDown
export default {
fadeOutDown: {
title: 'Fade to bottom',
group: {
name: 'exit',
title: 'Exit',
},
type: {
name: 'fade',
title: 'Fade',
},
withTransform: true,
percentageTranslate: true,
keyframes: [
{
opacity: '0',
transform: 'translate3d(0, 100%, 0)',
translateY: '+=100%',
duration: 1000,
easing: 'cubicBezier(0.25, 0.1, 0.25, 1)',
progress: '100',
},
],
initialStyle: {
opacity: '1',
},
},
};TAB: fadeOutLeft
export default {
fadeOutLeft: {
title: 'Fade to left',
group: {
name: 'exit',
title: 'Exit',
},
type: {
name: 'fade',
title: 'Fade',
},
withTransform: true,
percentageTranslate: true,
keyframes: [
{
opacity: '0',
transform: 'translate3d(-100%, 0, 0)',
translateX: '-=100%',
duration: 1000,
easing: 'cubicBezier(0.25, 0.1, 0.25, 1)',
progress: '100',
},
],
initialStyle: {
opacity: '1',
},
},
};TAB: fadeOutRight
export default {
fadeOutRight: {
title: 'Fade to right',
group: {
name: 'exit',
title: 'Exit',
},
type: {
name: 'fade',
title: 'Fade',
},
withTransform: true,
percentageTranslate: true,
keyframes: [
{
opacity: '0',
transform: 'translate3d(100%, 0, 0)',
translateX: '+=100%',
duration: 1000,
easing: 'cubicBezier(0.25, 0.1, 0.25, 1)',
progress: '100',
},
],
initialStyle: {
opacity: '1',
},
},
};TAB: fadeOutTopLeft
export default {
fadeOutTopLeft: {
title: 'Fade to top-left',
group: {
name: 'exit',
title: 'Exit',
},
type: {
name: 'fade',
title: 'Fade',
},
withTransform: true,
percentageTranslate: true,
keyframes: [
{
opacity: '0',
transform: 'translate3d(-100%, -100%, 0)',
translateX: '-=100%',
translateY: '-=100%',
duration: 1000,
easing: 'cubicBezier(0.25, 0.1, 0.25, 1)',
progress: '100',
},
],
initialStyle: {
opacity: '1',
},
},
};TAB: fadeOutTopRight
export default {
fadeOutTopRight: {
title: 'Fade to top-right',
group: {
name: 'exit',
title: 'Exit',
},
type: {
name: 'fade',
title: 'Fade',
},
withTransform: true,
percentageTranslate: true,
keyframes: [
{
opacity: '0',
transform: 'translate3d(100%, -100%, 0)',
translateX: '+=100%',
translateY: '-=100%',
duration: 1000,
easing: 'cubicBezier(0.25, 0.1, 0.25, 1)',
progress: '100',
},
],
initialStyle: {
opacity: '1',
},
},
};TAB: fadeOutUp
export default {
fadeOutUp: {
title: 'Fade to top',
group: {
name: 'exit',
title: 'Exit',
},
type: {
name: 'fade',
title: 'Fade',
},
withTransform: true,
percentageTranslate: true,
keyframes: [
{
opacity: '0',
transform: 'translate3d(0, -100%, 0)',
translateY: '-=100%',
duration: 1000,
easing: 'cubicBezier(0.25, 0.1, 0.25, 1)',
progress: '100',
},
],
initialStyle: {
opacity: '1',
},
},
};TAB: rotateOut
export default {
rotateOut: {
title: 'Rotate out',
group: {
name: 'exit',
title: 'Exit',
},
type: {
name: 'rotate',
title: 'Rotate',
},
withTransform: true,
keyframes: [
{
transform: 'rotate3d(0, 0, 1, 200deg)',
rotateZ: '+=200',
opacity: '0',
duration: 1000,
easing: 'cubicBezier(0.25, 0.1, 0.25, 1)',
progress: '100',
},
],
initialStyle: {
transformOrigin: 'center',
opacity: '1',
},
},
};TAB: rotateOutDownLeft
export default {
rotateOutDownLeft: {
title: 'Rotate to bottom-left',
group: {
name: 'exit',
title: 'Exit',
},
type: {
name: 'rotate',
title: 'Rotate',
},
withTransform: true,
keyframes: [
{
transform: 'rotate3d(0, 0, 1, 45deg)',
rotateZ: '+=45',
opacity: '0',
duration: 1000,
easing: 'cubicBezier(0.25, 0.1, 0.25, 1)',
progress: '100',
},
],
initialStyle: {
transformOrigin: 'left bottom',
opacity: '1',
},
},
};TAB: rotateOutDownRight
export default {
rotateOutDownRight: {
title: 'Rotate to bottom-right',
group: {
name: 'exit',
title: 'Exit',
},
type: {
name: 'rotate',
title: 'Rotate',
},
withTransform: true,
keyframes: [
{
transform: 'rotate3d(0, 0, 1, -45deg)',
rotateZ: '-=45',
opacity: '0',
duration: 1000,
easing: 'cubicBezier(0.25, 0.1, 0.25, 1)',
progress: '100',
},
],
initialStyle: {
transformOrigin: 'right bottom',
opacity: '1',
},
},
};TAB: rotateOutUpLeft
export default {
rotateOutUpLeft: {
title: 'Rotate to top-left',
group: {
name: 'exit',
title: 'Exit',
},
type: {
name: 'rotate',
title: 'Rotate',
},
withTransform: true,
keyframes: [
{
transform: 'rotate3d(0, 0, 1, -45deg)',
rotateZ: '-=45',
opacity: '0',
duration: 1000,
easing: 'cubicBezier(0.25, 0.1, 0.25, 1)',
progress: '100',
},
],
initialStyle: {
transformOrigin: 'left bottom',
opacity: '1',
},
},
};TAB: rotateOutUpRight
export default {
rotateOutUpRight: {
title: 'Rotate to top-right',
group: {
name: 'exit',
title: 'Exit',
},
type: {
name: 'rotate',
title: 'Rotate',
},
withTransform: true,
keyframes: [
{
transform: 'rotate3d(0, 0, 1, 90deg)',
rotateZ: '+=90',
opacity: '0',
duration: 1000,
easing: 'cubicBezier(0.25, 0.1, 0.25, 1)',
progress: '100',
},
],
initialStyle: {
transformOrigin: 'right bottom',
opacity: '1',
},
},
};TAB: slideOutDown
export default {
slideOutDown: {
title: 'Slide down',
group: {
name: 'exit',
title: 'Exit',
},
type: {
name: 'slide',
title: 'Slide',
},
withTransform: true,
percentageTranslate: true,
keyframes: [
{
visibility: 'hidden',
transform: 'translate3d(0, 100%, 0)',
translateY: '+=100',
duration: 1000,
easing: 'cubicBezier(0.25, 0.1, 0.25, 1)',
progress: '100',
},
],
initialStyle: {
transform: 'translate3d(0, 0, 0)',
},
},
};TAB: slideOutLeft
export default {
slideOutLeft: {
title: 'Slide to left',
group: {
name: 'exit',
title: 'Exit',
},
type: {
name: 'slide',
title: 'Slide',
},
withTransform: true,
percentageTranslate: true,
keyframes: [
{
visibility: 'hidden',
transform: 'translate3d(-100%, 0, 0)',
translateX: '-=100%',
duration: 1000,
easing: 'cubicBezier(0.25, 0.1, 0.25, 1)',
progress: '100',
},
],
initialStyle: {
transform: 'translate3d(0, 0, 0)',
},
},
};TAB: slideOutRight
export default {
slideOutRight: {
title: 'Slide to right',
group: {
name: 'exit',
title: 'Exit',
},
type: {
name: 'slide',
title: 'Slide',
},
withTransform: true,
percentageTranslate: true,
keyframes: [
{
visibility: 'hidden',
transform: 'translate3d(100%, 0, 0)',
translateX: '+=100%',
duration: 1000,
easing: 'cubicBezier(0.25, 0.1, 0.25, 1)',
progress: '100',
},
],
initialStyle: {
transform: 'translate3d(0, 0, 0)',
},
},
};TAB: slideOutUp
export default {
slideOutUp: {
title: 'Slide up',
group: {
name: 'exit',
title: 'Exit',
},
type: {
name: 'slide',
title: 'Slide',
},
withTransform: true,
percentageTranslate: true,
keyframes: [
{
visibility: 'hidden',
transform: 'translate3d(0, -100%, 0)',
translateY: '-=100%',
duration: 1000,
easing: 'cubicBezier(0.25, 0.1, 0.25, 1)',
progress: '100',
},
],
initialStyle: {
transform: 'translate3d(0, 0, 0)',
},
},
};TAB: zoomOut
export default {
zoomOut: {
title: 'Zoom out',
group: {
name: 'exit',
title: 'Exit',
},
type: {
name: 'zoom',
title: 'Zoom',
},
withTransform: true,
keyframes: [
{
opacity: '0',
scaleX: '*=0.3',
scaleY: '*=0.3',
scaleZ: '*=0.3',
duration: 500,
easing: 'cubicBezier(0.25, 0.1, 0.25, 1)',
progress: '100',
},
],
initialStyle: {
opacity: '1',
},
},
};TAB: zoomOutDown
export default {
zoomOutDown: {
title: 'Zoom to bottom',
group: {
name: 'exit',
title: 'Exit',
},
type: {
name: 'zoom',
title: 'Zoom',
},
withTransform: true,
keyframes: [
{
opacity: '1',
transform: 'scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0)',
easing: 'cubicBezier(0.175, 0.885, 0.32, 1)',
duration: 400,
progress: '40',
translateX: '+=0',
translateY: '+=-60',
translateZ: '+=0',
scaleX: '*=0.4750',
scaleY: '*=0.4750',
scaleZ: '*=0.4750',
},
{
opacity: '0',
transform: 'scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0)',
easing: 'cubicBezier(0.55, 0.055, 0.675, 0.19)',
duration: 600,
progress: '100',
translateX: '+=0',
translateY: '+=2060',
translateZ: '+=0',
scaleX: '*=0.2105',
scaleY: '*=0.2105',
scaleZ: '*=0.2105',
},
],
initialStyle: {
transformOrigin: 'center bottom',
},
},
};TAB: zoomOutLeft
export default {
zoomOutLeft: {
title: 'Zoom to left',
group: {
name: 'exit',
title: 'Exit',
},
type: {
name: 'zoom',
title: 'Zoom',
},
withTransform: true,
keyframes: [
{
opacity: '1',
transform: 'scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0)',
duration: 400,
easing: 'cubicBezier(0.175, 0.885, 0.32, 1)',
progress: '40',
translateX: '+=42',
translateY: '+=0',
translateZ: '+=0',
scaleX: '*=0.4750',
scaleY: '*=0.4750',
scaleZ: '*=0.4750',
},
{
opacity: '0',
transform: 'scale(0.1) translate3d(-2000px, 0, 0)',
duration: 600,
easing: 'cubicBezier(0.55, 0.055, 0.675, 0.19)',
progress: '100',
translateX: '+=-2042',
translateY: '+=0',
translateZ: '+=0',
},
],
initialStyle: {
transformOrigin: 'left center',
},
},
};TAB: zoomOutRight
export default {
zoomOutRight: {
title: 'Zoom to right',
group: {
name: 'exit',
title: 'Exit',
},
type: {
name: 'zoom',
title: 'Zoom',
},
withTransform: true,
keyframes: [
{
opacity: '1',
transform: 'scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0)',
duration: 400,
easing: 'cubicBezier(0.175, 0.885, 0.32, 1)',
progress: '40',
translateX: '+=-42',
translateY: '+=0',
translateZ: '+=0',
scaleX: '*=0.4750',
scaleY: '*=0.4750',
scaleZ: '*=0.4750',
},
{
opacity: '0',
transform: 'scale(0.1) translate3d(2000px, 0, 0)',
duration: 600,
easing: 'cubicBezier(0.55, 0.055, 0.675, 0.19)',
progress: '100',
translateX: '+=2042',
translateY: '+=0',
translateZ: '+=0',
},
],
initialStyle: {
transformOrigin: 'right center',
},
},
};TAB: zoomOutUp
export default {
zoomOutUp: {
title: 'Zoom to top',
group: {
name: 'exit',
title: 'Exit',
},
type: {
name: 'zoom',
title: 'Zoom',
},
withTransform: true,
keyframes: [
{
opacity: '1',
transform: 'scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0)',
easing: 'cubicBezier(0.175, 0.885, 0.32, 1)',
duration: 400,
progress: '40',
translateX: '+=0',
translateY: '+=60',
translateZ: '+=0',
scaleX: '*=0.4750',
scaleY: '*=0.4750',
scaleZ: '*=0.4750',
},
{
opacity: '0',
transform: 'scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0)',
easing: 'cubicBezier(0.55, 0.055, 0.675, 0.19)',
duration: 600,
progress: '100',
translateX: '+=0',
translateY: '+=-2060',
translateZ: '+=0',
scaleX: '*=0.2105',
scaleY: '*=0.2105',
scaleZ: '*=0.2105',
},
],
initialStyle: {
transformOrigin: 'center bottom',
},
},
};---: