From bdf93e89fb175bbfb590d1d22ae2919f3de9fb9f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Fe=CC=81lix=20Pe=CC=81ault?= Date: Tue, 21 Apr 2020 13:09:11 +0200 Subject: [PATCH] Last little fixes and debugging --- src/animations/Carousel.js | 35 ++++++++++++++----- src/animations/viewer.js | 11 ++---- src/atoms/TitleSite.svelte | 4 +-- src/organisms/Carousel.svelte | 3 +- src/routes/_layout.svelte | 4 +-- .../viewer/[country]/[place]/[photo].svelte | 32 ++++++++--------- src/style/organisms/_fullscreen.scss | 1 + src/style/pages/_viewer.scss | 2 +- src/utils/Transition.svelte | 12 +++---- 9 files changed, 56 insertions(+), 48 deletions(-) diff --git a/src/animations/Carousel.js b/src/animations/Carousel.js index cc9fb50..1f36dd1 100644 --- a/src/animations/Carousel.js +++ b/src/animations/Carousel.js @@ -10,7 +10,6 @@ export const animateIn = scope => { const tl = anime.timeline({ easing: 'easeOutQuart', duration: animDuration, - // delay: animDelay, autoplay: false }) @@ -27,7 +26,8 @@ export const animateIn = scope => { tl.add({ targets: scope.querySelector('.is-active picture'), translateY: [8, 0], - translateZ: [0, 0] + translateZ: [0, 0], + complete: event => event.animatables[0].target.removeAttribute('style') }, 100) // Photo: Prev @@ -36,7 +36,8 @@ export const animateIn = scope => { translateY: [8, 0], translateX: [64, 0], translateZ: [0, 0], - rotate: window.innerWidth >= 768 ? [-2, 0] : [0, 0] + rotate: window.innerWidth >= 768 ? [-2, 0] : [0, 0], + complete: event => event.animatables[0].target.removeAttribute('style') }, 100) // Photo: Next @@ -45,13 +46,31 @@ export const animateIn = scope => { translateY: [8, 0], translateX: [-48, 0], translateZ: [0, 0], - rotate: window.innerWidth >= 768 ? [2, 0] : [0, 0] + rotate: window.innerWidth >= 768 ? [2, 0] : [0, 0], + complete: event => event.animatables[0].target.removeAttribute('style') }, 100) // Reveal on scroll - const carouselIn = ScrollOut({ - once: true, - targets: scope, - onShown: () => tl.restart() + let visible = false + requestAnimationFrame(() => { + const carouselReveal = ScrollOut({ + once: true, + targets: scope, + onChange: (el, ctx) => { + 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 diff --git a/src/animations/viewer.js b/src/animations/viewer.js index 3df09d6..dd9b7dc 100644 --- a/src/animations/viewer.js +++ b/src/animations/viewer.js @@ -7,18 +7,11 @@ import { animDuration, animDelay } from 'utils/store' */ export const animateIn = () => { const viewer = document.querySelector('.viewer') + const tl = anime.timeline({ easing: 'easeOutQuart', duration: animDuration, - delay: animDelay - }) - - // Carousel - tl.add({ - targets: viewer.querySelector('.carousel .wrap'), - opacity: [0, 1], - translateY: ['-4%', 0], - translateZ: [0, 0] + delay: 1400 }) // Carousel: Number diff --git a/src/atoms/TitleSite.svelte b/src/atoms/TitleSite.svelte index 98a86b6..27965cd 100644 --- a/src/atoms/TitleSite.svelte +++ b/src/atoms/TitleSite.svelte @@ -19,11 +19,11 @@ }) -
-
+
{@html charsToSpan('Houses')}
diff --git a/src/organisms/Carousel.svelte b/src/organisms/Carousel.svelte index ca321df..e287060 100644 --- a/src/organisms/Carousel.svelte +++ b/src/organisms/Carousel.svelte @@ -135,8 +135,7 @@ -
swipe(event.detail.directions)} >
diff --git a/src/routes/_layout.svelte b/src/routes/_layout.svelte index f2afec6..ec91b2b 100644 --- a/src/routes/_layout.svelte +++ b/src/routes/_layout.svelte @@ -32,7 +32,7 @@ name slug flag { full_url title } - continent { id } + continent { id name } } } locations (filter: { status_eq: "published" }) { @@ -41,7 +41,7 @@ name slug region - country { id } + country { id name slug } description close coordinates diff --git a/src/routes/viewer/[country]/[place]/[photo].svelte b/src/routes/viewer/[country]/[place]/[photo].svelte index 6e30d83..90cec3c 100644 --- a/src/routes/viewer/[country]/[place]/[photo].svelte +++ b/src/routes/viewer/[country]/[place]/[photo].svelte @@ -40,7 +40,6 @@ pageAnimation } from 'utils/store' import { getThumbnail } from 'utils/functions' - // Components import IconGlobe from 'atoms/IconGlobe' import IconCross from 'atoms/IconCross' @@ -48,24 +47,24 @@ import Fullscreen from 'organisms/Fullscreen' import Transition from 'utils/Transition' import SocialMetas from 'utils/SocialMetas' - // Animations import { animateIn } from 'animations/viewer' // Props export let photos - // Variables const { page } = stores() pageAnimation.set(animateIn) - let windowWidth - let gotoLink - let currentPhoto = photos.find(photo => photo.slug === $page.params.photo) - let pageTitle = ($currentLocation) ? `Beautiful homes of ${$currentLocation.name}, ${$currentLocation.country.name}` : '' // Update store current location - if (!$currentLocation) currentLocation.set($locations.find(loc => loc.slug === $page.params.place)) - if (!$currentPhotos) currentPhotos.set(photos) + currentLocation.set($locations.find(loc => loc.slug === $page.params.place)) + currentPhotos.set(photos) + + let windowWidth + let gotoLink + let pageTitle + let currentPhoto = photos.find(photo => photo.slug === $page.params.photo) + // Photo has changed (from Carousel) const photoChanged = event => { @@ -73,10 +72,10 @@ const windowPathname = window.location.pathname const newUrl = windowPathname.substring(0, windowPathname.lastIndexOf('/') + 1) + currentPhoto.slug // Go to page via a sapper-noscroll link to avoid scroll jump (hacky) - gotoLink.href = newUrl - gotoLink.click() - // Change page title with photo name - pageTitle = `${currentPhoto.name}, ${currentPhoto.location.country.name}` + if (gotoLink && newUrl) { + gotoLink.href = newUrl + gotoLink.click() + } } @@ -90,11 +89,11 @@ - {$site.seo_name} – {pageTitle} + {$site.seo_name} – Beautiful homes of {$currentLocation.name}, {$currentLocation.country.name} @@ -122,8 +121,7 @@
- diff --git a/src/style/organisms/_fullscreen.scss b/src/style/organisms/_fullscreen.scss index 140616d..322451d 100644 --- a/src/style/organisms/_fullscreen.scss +++ b/src/style/organisms/_fullscreen.scss @@ -7,6 +7,7 @@ height: 100%; overflow: hidden; pointer-events: none; + user-select: none; &, * { will-change: transform, opacity; diff --git a/src/style/pages/_viewer.scss b/src/style/pages/_viewer.scss index 11b283c..4fb8103 100644 --- a/src/style/pages/_viewer.scss +++ b/src/style/pages/_viewer.scss @@ -98,7 +98,7 @@ // Specific box shadow for images &__photo { - box-shadow: 0 pxVW(16px) pxVW(40) rgba(#2E025C, 0.4); + box-shadow: 0 pxVW(16) pxVW(40) rgba(#2e025c, 0.4); } } diff --git a/src/utils/Transition.svelte b/src/utils/Transition.svelte index f94bb68..04ffff6 100644 --- a/src/utils/Transition.svelte +++ b/src/utils/Transition.svelte @@ -9,17 +9,15 @@ animDelay, animPanelDelay } from 'utils/store' - const { page } = stores() - $: animateIn = $pageAnimation - - // Animations - import { panelBackgroundOut } from 'animations/Transition' - // Components import TitleSite from 'atoms/TitleSite' import IconGlobe from 'atoms/IconGlobe' + // Animations + import { panelBackgroundOut } from 'animations/Transition' - // Props and Variables + // Variables + const { page } = stores() + $: animateIn = $pageAnimation let scope let show = false let firstLoad = true