Félix Péault
2dc51a167a
All checks were successful
continuous-integration/drone/push Build is passing
- Define entries (utils, animations, etc) in the Rollup config in order to omit the whole back path (../../) when importing a file - Global revoleExtensions in the config (to avoid duplicates)
73 lines
1.6 KiB
JavaScript
73 lines
1.6 KiB
JavaScript
import anime from 'animejs'
|
|
import { animDuration, animDurationLong } from 'utils/store'
|
|
|
|
|
|
/*
|
|
** Transition In
|
|
*/
|
|
export const animateIn = scope => {
|
|
// Panel itself
|
|
const transition = anime({
|
|
targets: scope.querySelector('.transition__background'),
|
|
scaleY: [1, 1],
|
|
opacity: [0, 1],
|
|
duration: 400,
|
|
easing: 'easeInOutQuart',
|
|
begin () {
|
|
// Show the panel
|
|
scope.classList.remove('hidden')
|
|
}
|
|
})
|
|
// Globe icon
|
|
const globe = anime({
|
|
targets: scope.querySelector('svg'),
|
|
opacity: [0, 1],
|
|
translateY: ['16px', 0],
|
|
duration: 400,
|
|
easing: 'easeInOutQuart'
|
|
})
|
|
|
|
}
|
|
|
|
|
|
/*
|
|
** Transition Out
|
|
*/
|
|
export const animateOut = (scope, callback) => {
|
|
// Background
|
|
const background = anime({
|
|
targets: scope.querySelector('.transition__background'),
|
|
scaleY: [1, 0],
|
|
duration: animDurationLong,
|
|
delay: 800,
|
|
easing: 'easeInOutQuart',
|
|
complete () {
|
|
// Hide the panel
|
|
scope.classList.add('hidden')
|
|
|
|
// Run callback
|
|
callback()
|
|
}
|
|
})
|
|
|
|
// Title
|
|
const title = anime({
|
|
targets: scope.querySelector('.title-location'),
|
|
opacity: [1, 0],
|
|
translateY: [0, '-50vh'],
|
|
duration: animDuration,
|
|
delay: 1000,
|
|
easing: 'easeInOutQuart'
|
|
})
|
|
|
|
// Globe icon
|
|
const globe = anime({
|
|
targets: scope.querySelector('svg'),
|
|
opacity: [1, 0],
|
|
translateY: [0, '-50vh'],
|
|
duration: animDuration,
|
|
delay: 1000,
|
|
easing: 'easeInOutQuart'
|
|
})
|
|
}
|