Carousel: Fix reveal again?

This commit is contained in:
2020-04-21 19:52:20 +02:00
parent 40c57fee13
commit b8b4d55409

View File

@@ -16,7 +16,7 @@ export const animateIn = scope => {
// Carousel
tl.add({
targets: scope,
translateY: [32, 0],
translateY: [window.innerWidth <= 768 ? 16 : 32, 0],
translateZ: [0, 0],
opacity: [0, 1],
complete: event => event.animatables[0].target.removeAttribute('style')
@@ -52,29 +52,25 @@ export const animateIn = scope => {
// Reveal on scroll
let visible = false
requestAnimationFrame(() => {
const carouselReveal = ScrollOut({
once: true,
targets: scope,
onChange: (el, ctx) => {
requestAnimationFrame(() => {
if (ctx.visible === 0) {
visible = true
}
})
},
onShown: (el, ctx) => {
requestAnimationFrame(() => {
// If revealed on scroll, no delay
if (visible) {
tl.restart()
}
// If revealed on load, add a delay
else {
setTimeout(() => tl.restart(), animDelay * 2)
}
})
const carouselReveal = ScrollOut({
once: true,
targets: scope,
onChange: (el, ctx) => {
requestAnimationFrame(() => {
if (ctx.visible === 0) {
visible = true
}
})
},
onShown: (el, ctx) => {
// If revealed on scroll, no delay
if (visible) {
tl.restart()
}
})
// If revealed on load, add a delay
else {
setTimeout(() => tl.restart(), animDelay * 2)
}
}
})
}