56 lines
1.3 KiB
JavaScript
56 lines
1.3 KiB
JavaScript
import anime from 'animejs'
|
|
import ScrollOut from 'scroll-out'
|
|
import { animDuration } from '../utils/store'
|
|
|
|
|
|
/*
|
|
** Transition In
|
|
*/
|
|
export const animateIn = scope => {
|
|
// Card: Active
|
|
const cardActive = ScrollOut({
|
|
once: true,
|
|
targets: scope.querySelector('.gallery__photo--active'),
|
|
onShown (el) {
|
|
anime({
|
|
targets: el,
|
|
top: [32, 0],
|
|
duration: 1200,
|
|
delay: 650,
|
|
easing: 'easeOutQuart'
|
|
})
|
|
}
|
|
})
|
|
|
|
// Card: Prev
|
|
const cardPrev = ScrollOut({
|
|
once: true,
|
|
targets: scope.querySelector('.gallery__photo--prev'),
|
|
onShown (el) {
|
|
anime({
|
|
targets: el,
|
|
top: [5, 0],
|
|
left: [-64, 0],
|
|
duration: 1200,
|
|
delay: 690,
|
|
easing: 'easeOutQuart'
|
|
})
|
|
}
|
|
})
|
|
|
|
// Card: Prev
|
|
const cardNext = ScrollOut({
|
|
once: true,
|
|
targets: scope.querySelector('.gallery__photo--next'),
|
|
onShown (el) {
|
|
anime({
|
|
targets: el,
|
|
top: [5, 0],
|
|
left: [48, 0],
|
|
duration: 1200,
|
|
delay: 710,
|
|
easing: 'easeOutQuart'
|
|
})
|
|
}
|
|
})
|
|
} |