diff --git a/src/animations/Carousel.js b/src/animations/Carousel.js index 2d75d25..0073950 100644 --- a/src/animations/Carousel.js +++ b/src/animations/Carousel.js @@ -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) + } + } }) } \ No newline at end of file