Locations: Reset delay between locations on complete
All checks were successful
continuous-integration/drone/push Build is passing

Would increment and create a super long delay otherwise
This commit is contained in:
2020-04-22 11:31:56 +02:00
parent 113e2f53df
commit 8231ea20a7

View File

@@ -2,21 +2,24 @@ import anime from 'animejs'
import ScrollOut from 'scroll-out' import ScrollOut from 'scroll-out'
import { animDurationLong } from 'utils/store' import { animDurationLong } from 'utils/store'
// Variables
let delay = 0
/* /*
** Transition In ** Transition In
*/ */
export const animateIn = scope => { export const animateIn = scope => {
let delay = 0
// Each location (reveal on scroll) // Each location (reveal on scroll)
scope.querySelectorAll('.location').forEach(location => { scope.querySelectorAll('.location').forEach(location => {
const tl = anime.timeline({ const tl = anime.timeline({
easing: 'easeOutQuart', easing: 'easeOutQuart',
duration: 600, duration: 600,
autoplay: false, autoplay: false,
delay delay,
complete: () => {
// Reset delay
delay = 0
}
}) })
// Image // Image
@@ -42,14 +45,14 @@ export const animateIn = scope => {
translateZ: [0, 0] translateZ: [0, 0]
}, 200) }, 200)
// Increase delay between locations
delay += 65
// Scroll reveal // Scroll reveal
ScrollOut({ ScrollOut({
once: true, once: true,
targets: location, targets: location,
onShown: () => tl.restart() onShown: () => tl.restart()
}) })
// Increase delay between locations
delay += 65
}) })
} }