How to use the velocity-react.velocityHelpers.registerEffect function in velocity-react
To help you get started, we’ve selected a few velocity-react examples, based on popular ways it is used in public projects.
Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
aholachek / react-animation-comparison / src / velocity-react-example.js View on Github 
import React from 'react'
import { VelocityTransitionGroup, velocityHelpers } from 'velocity-react'
import 'velocity-animate/velocity.ui'
import animationTimings from './common/animationTimings'
const cardAnimationIn = velocityHelpers.registerEffect({
defaultDuration: animationTimings.cardEnter,
calls: [
[
{
opacity: [1, 0],
translateY: [0, -20],
translateZ: 0
},
1,
{
display: 'flex',
easing: 'spring'
}
]
]
})[
{
opacity: [0, 1],
translateY: [20, 0],
translateZ: 0
},
1,
{
display: 'flex',
easing: 'spring'
}
]
]
})
const gridAnimationIn = velocityHelpers.registerEffect({
defaultDuration: animationTimings.gridEnter,
calls: [
[
{
opacity: [1, 0],
translateX: [0, -1000],
translateZ: 0
},
1,
{
display: 'flex',
easing: 'spring'
}
]
]
})calls: [
[
{
opacity: [1, 0],
translateY: [0, -20],
translateZ: 0
},
1,
{
display: 'flex',
easing: 'spring'
}
]
]
})
const cardAnimationOut = velocityHelpers.registerEffect({
defaultDuration: animationTimings.cardLeave,
calls: [
[
{
opacity: [0, 1],
translateY: [20, 0],
translateZ: 0
},
1,
{
display: 'flex',
easing: 'spring'
}
]
]
})[
{
opacity: [1, 0],
translateX: [0, -1000],
translateZ: 0
},
1,
{
display: 'flex',
easing: 'spring'
}
]
]
})
const gridAnimationOut = velocityHelpers.registerEffect({
defaultDuration: animationTimings.gridLeave,
calls: [
[
{
opacity: [1, 0],
translateX: [0, 1000]
},
1,
{
display: 'flex',
easing: 'spring',
delay: 2000
}
]
]
})velocity-react
React components to wrap Velocity animations
