diff --git a/package.json b/package.json index d8685a4..4b2abd6 100644 --- a/package.json +++ b/package.json @@ -37,7 +37,7 @@ "@rollup/plugin-commonjs": "^11.0.2", "@rollup/plugin-node-resolve": "^7.1.1", "@rollup/plugin-replace": "^2.3.1", - "autoprefixer": "^9.7.5", + "autoprefixer": "^9.7.6", "babel-plugin-module-resolver": "^4.0.0", "dotenv": "^8.2.0", "eslint-config-standard": "^14.1.1", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 8b396e4..6869453 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -19,7 +19,7 @@ devDependencies: '@rollup/plugin-commonjs': 11.0.2_rollup@2.3.3 '@rollup/plugin-node-resolve': 7.1.1_rollup@2.3.3 '@rollup/plugin-replace': 2.3.1_rollup@2.3.3 - autoprefixer: 9.7.5 + autoprefixer: 9.7.6 babel-plugin-module-resolver: 4.0.0 dotenv: 8.2.0 eslint-config-standard: 14.1.1_ba4e39e016526c0b815f06ce4b4a873a @@ -1167,6 +1167,21 @@ packages: hasBin: true resolution: integrity: sha512-URo6Zvt7VYifomeAfJlMFnYDhow1rk2bufwkbamPEAtQFcL11moLk4PnR7n9vlu7M+BkXAZkHFA0mIcY7tjQFg== + /autoprefixer/9.7.6: + dependencies: + browserslist: 4.11.1 + caniuse-lite: 1.0.30001039 + chalk: 2.4.2 + normalize-range: 0.1.2 + num2fraction: 1.2.2 + postcss: 7.0.27 + postcss-value-parser: 4.0.3 + dev: true + engines: + node: '>=6.0.0' + hasBin: true + resolution: + integrity: sha512-F7cYpbN7uVVhACZTeeIeealwdGM6wMtfWARVLTy5xmKtgVdBNJvbDRoCK3YO1orcs7gv/KwYlb3iXwu9Ug9BkQ== /aws-sign2/0.7.0: dev: true resolution: @@ -1235,6 +1250,16 @@ packages: hasBin: true resolution: integrity: sha512-WqEC7Yr5wUH5sg6ruR++v2SGOQYpyUdYYd4tZoAq1F7y+QXoLoYGXVbxhtaIqWmAJjtNTRjVD3HuJc1OXTel2A== + /browserslist/4.11.1: + dependencies: + caniuse-lite: 1.0.30001039 + electron-to-chromium: 1.3.390 + node-releases: 1.1.53 + pkg-up: 2.0.0 + dev: true + hasBin: true + resolution: + integrity: sha512-DCTr3kDrKEYNw6Jb9HFxVLQNaue8z+0ZfRBRjmCunKDEXEBajKDj2Y+Uelg+Pi29OnvaSGwjOsnRyNEkXzHg5g== /buffer-from/1.1.1: dev: true resolution: @@ -1311,6 +1336,10 @@ packages: dev: true resolution: integrity: sha512-zii9quPo96XfOiRD4TrfYGs+QsGZpb2cGiMAzPjtf/hpFgB6zCPZgJb7I1+EATeMw/o+lG8FyRAnI+CWStHcaQ== + /caniuse-lite/1.0.30001039: + dev: true + resolution: + integrity: sha512-SezbWCTT34eyFoWHgx8UWso7YtvtM7oosmFoXbCkdC6qJzRfBTeTgE9REtKtiuKXuMwWTZEvdnFNGAyVMorv8Q== /caseless/0.12.0: dev: true resolution: @@ -3392,6 +3421,14 @@ packages: node: '>=4' resolution: integrity: sha1-9tXREJ4Z1j7fQo4L1X4Sd3YVM0s= + /pkg-up/2.0.0: + dependencies: + find-up: 2.1.0 + dev: true + engines: + node: '>=4' + resolution: + integrity: sha1-yBmscoBZpGHKscOImivjxJoATX8= /pkg-up/3.1.0: dependencies: find-up: 3.0.0 @@ -4828,7 +4865,7 @@ specifiers: '@rollup/plugin-node-resolve': ^7.1.1 '@rollup/plugin-replace': ^2.3.1 animejs: ^3.1.0 - autoprefixer: ^9.7.5 + autoprefixer: ^9.7.6 babel-plugin-module-resolver: ^4.0.0 compression: ^1.7.4 dotenv: ^8.2.0 diff --git a/src/animations/TitleSite.js b/src/animations/TitleSite.js index 61fa221..ee5424f 100644 --- a/src/animations/TitleSite.js +++ b/src/animations/TitleSite.js @@ -13,7 +13,7 @@ export const animateIn = (scope, init) => { translateY: ['100%', 0], easing: 'easeOutQuart', duration: 1000, - delay: anime.stagger(40), + delay: anime.stagger(40, { start: init ? 0 : animDelay }), autoplay: false }) @@ -21,12 +21,6 @@ export const animateIn = (scope, init) => { const title = ScrollOut({ once: true, targets: scope, - onShown: () => { - if (init) { - letters.restart() - } else { - setTimeout(() => letters.restart(), animDelay) - } - } + onShown: () => letters.restart() }) } diff --git a/src/animations/index.js b/src/animations/index.js index a9be870..8e84a9c 100644 --- a/src/animations/index.js +++ b/src/animations/index.js @@ -67,26 +67,26 @@ export const animateIn = () => { // Title: World (reveal on scroll) const titleWorld = document.getElementById('title-world') const titleWorldTranslate = anime({ - targets: document.getElementById('title-world'), + targets: titleWorld, translateX: ['5%', '-3%'], easing: 'linear', autoplay: false, duration: animDuration }) - const titleWorldAnime = parallaxAnime(titleWorld, titleWorldTranslate) + const titleWorldAnime = () => parallaxAnime(titleWorld, titleWorldTranslate) const titleWorldScroll = ScrollOut({ once: true, targets: titleWorld, onShown: () => { const titleWorldLetters = anime({ - targets: el.querySelectorAll('span'), + targets: titleWorld.querySelectorAll('span'), translateY: ['100%', 0], easing: 'easeOutQuart', delay: anime.stagger(70), duration: animDuration }) - window.addEventListener('scroll', throttle(() => titleWorldAnime, 10)) - requestAnimationFrame(() => titleWorldAnime) + window.addEventListener('scroll', throttle(titleWorldAnime, 10)) + requestAnimationFrame(titleWorldAnime) }, onHidden: () => { if (parallaxAnime) window.removeEventListener('scroll', parallaxAnime) diff --git a/src/style/organisms/_photos.scss b/src/style/organisms/_photos.scss index 18b49dc..37f3e00 100644 --- a/src/style/organisms/_photos.scss +++ b/src/style/organisms/_photos.scss @@ -53,6 +53,7 @@ .photo { position: relative; z-index: 4; + overflow: hidden; // Last photo doesn't need spacing &:last-child {