flayks/housesof
2
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Carousel: Fix reveal again?

Browse Source
This commit is contained in:
Félix Péault
2020-04-21 19:52:20 +02:00
parent 40c57fee13
commit b8b4d55409
1 changed files with 20 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

44
src/animations/Carousel.js
View File

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