diff --git a/src/animations/Photo.js b/src/animations/Photo.js index 75c8beb..69f55f6 100644 --- a/src/animations/Photo.js +++ b/src/animations/Photo.js @@ -1,7 +1,7 @@ import anime from 'animejs' import ScrollOut from 'scroll-out' import { animDuration, animDurationLong } from '../utils/store' -import { debounce } from '../utils/functions' +import { throttle, parallaxAnime } from '../utils/functions' /* @@ -12,7 +12,6 @@ export const animateIn = scope => { const titleReveal = ScrollOut({ once: true, targets: scope, - offset: window.offsetHeight / 3, onShown (el) { // Title reveal anime({ @@ -29,7 +28,6 @@ export const animateIn = scope => { const photoReveal = ScrollOut({ once: true, targets: scope.querySelector('picture'), - offset: window.offsetHeight / 3, onShown (el) { // Title reveal anime({ @@ -43,6 +41,23 @@ export const animateIn = scope => { } }) - // Number parallax - //! TODO + // Number parallax on scroll + const numberParallax = ScrollOut({ + targets: scope.querySelector('.photo__number'), + onShown (el) { + const translate = anime({ + targets: el, + translateX: ['-50%', '-50%'], + translateY: ['-50%', '-20%'], + duration: 2000, + easing: 'linear', + autoplay: false + }) + window.addEventListener('scroll', () => parallaxAnime(el, translate)) + setTimeout(() => parallaxAnime(el, translate), 50) + }, + onHidden () { + window.removeEventListener('scroll', parallaxAnime) + } + }) } diff --git a/src/animations/index.js b/src/animations/index.js index 4abecd1..c31598c 100644 --- a/src/animations/index.js +++ b/src/animations/index.js @@ -1,7 +1,7 @@ import anime from 'animejs' import ScrollOut from 'scroll-out' import { animDuration } from '../utils/store' -import { debounce } from '../utils/functions' +import { throttle, parallaxAnime } from '../utils/functions' /* @@ -13,7 +13,7 @@ export const animateIn = () => { once: true, targets: '#title-houses', onShown (el) { - // Reveal + // Reveal each letter anime({ targets: el.querySelectorAll('span'), translateY: ['-70%', 0], @@ -23,19 +23,18 @@ export const animateIn = () => { }) // Parallax on scroll - const translate = anime.timeline({ + const translate = anime({ + targets: el, + translateX: ['7%', '-15%'], + easing: 'linear', autoplay: false, duration: animDuration }) - translate.add({ - targets: el, - translateX: ['-3%', '-17%'], - easing: 'easeOutQuart', - duration: animDuration - }) - window.addEventListener('scroll', debounce(event => { - translate.seek(translate.duration * (window.scrollY / 1000)) - }), 50) + window.addEventListener('scroll', throttle(() => parallaxAnime(el, translate), 10)) + setTimeout(() => parallaxAnime(el, translate), 50) + }, + onHidden () { + window.removeEventListener('scroll', parallaxAnime) } }) @@ -59,7 +58,7 @@ export const animateIn = () => { const introCarousel = ScrollOut({ once: true, targets: '#intro-carousel', - onShown(el) { + onShown (el) { anime({ targets: el, opacity: [0, 1], @@ -100,22 +99,19 @@ export const animateIn = () => { }) // Parallax on scroll - const translate = anime.timeline({ + const translate = anime({ + targets: el, + translateX: ['5%', '-3%'], + easing: 'linear', autoplay: false, duration: animDuration }) - translate.add({ - targets: el, - translateX: ['4%', '-4%'], - easing: 'easeOutQuart', - duration: animDuration - }) - if (ctx.visible) { - window.addEventListener('scroll', debounce(event => { - translate.seek(translate.duration * (window.scrollY / 1000)) - }), 35) - } + window.addEventListener('scroll', throttle(() => parallaxAnime(el, translate), 10)) + setTimeout(() => parallaxAnime(el, translate), 50) + }, + onHidden() { + window.removeEventListener('scroll', parallaxAnime) } }) } diff --git a/src/utils/functions.js b/src/utils/functions.js index c6518ed..2535eb1 100644 --- a/src/utils/functions.js +++ b/src/utils/functions.js @@ -1,6 +1,16 @@ import { apiEndpoints } from './store' +/* +** Get thumbnail from API +*/ +export const getThumbnail = (id, width, height, type = 'crop', quality = 75) => { + const ratio = 1.5 + height = !height ? Math.round(width / ratio) : height + return `${apiEndpoints.rest}/assets/${id}?w=${width}&h=${height}&f=${type}&q=${quality}` +} + + /* ** Debounce function with a delay ** (For scrolling or other resource demanding behaviors) @@ -43,8 +53,26 @@ export const lettersToSpan = string => { /* -** Format date from an input date +** Random String Generator */ +export const randomString = (length = 6, type = 'A') => { + type = type && type.toLowerCase() + let str = '' + let i = 0 + const min = type == 'a' ? 10 : 0 + const max = type == 'n' ? 10 : 62 + for (; i++ < length;) { + let r = Math.random() * (max - min) + min << 0 + str += String.fromCharCode(r += r > 9 ? r < 36 ? 55 : 61 : 48) + } + return str +} + + +/* +** Date related +*/ +// Format date from an input date export const formatDate = (originDate, format) => { let output const date = new Date(originDate) @@ -70,10 +98,7 @@ export const formatDate = (originDate, format) => { return output } - -/* -** Relative time from an input date -*/ +// Relative time from an input date export const relativeTime = (originDate, limit = 0) => { const date = new Date(originDate) const diff = Number(new Date()) - date @@ -133,29 +158,19 @@ export const relativeTime = (originDate, limit = 0) => { } - /* -** Random String Generator +** Controls Anime.js parallax */ -export const randomString = (length = 6, type = 'A') => { - type = type && type.toLowerCase() - let str = '' - let i = 0 - const min = type == 'a' ? 10 : 0 - const max = type == 'n' ? 10 : 62 - for (; i++ < length;) { - let r = Math.random() * (max - min) + min << 0 - str += String.fromCharCode(r += r > 9 ? r < 36 ? 55 : 61 : 48) +export const parallaxAnime = (element, anime) => { + const bound = element.getBoundingClientRect() + const windowHeight = window.innerHeight + if (bound.top < windowHeight && bound.bottom > 0) { + anime.seek(anime.duration * ((windowHeight - bound.top) / (windowHeight + bound.height)).toFixed(3)) + } else { + if (bound.top >= windowHeight) { + anime.seek(0) + } else if (bound.bottom <= 0) { + anime.seek(anime.duration) + } } - return str -} - - -/* -** Get thumbnail from API -*/ -export const getThumbnail = (id, width, height, type = 'crop', quality = 75) => { - const ratio = 1.5 - height = !height ? Math.round(width / ratio) : height - return `${apiEndpoints.rest}/assets/${id}?w=${width}&h=${height}&f=${type}&q=${quality}` }