From a60a67a892f813a8ab260e31b862fd171b702c25 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Fe=CC=81lix=20Pe=CC=81ault?= Date: Tue, 10 Mar 2020 21:16:21 +0100 Subject: [PATCH] Scope animations --- src/animations/Carousel.js | 8 ++++---- src/animations/Locations.js | 4 ++-- src/animations/TitleSite.js | 4 ++-- src/animations/Transition.js | 20 +++++++++++--------- src/atoms/TitleSite.svelte | 7 +++++-- src/molecules/Photo.svelte | 4 +++- src/organisms/Carousel.svelte | 4 +++- src/organisms/Locations.svelte | 5 +++-- src/utils/Transition.svelte | 10 ++++++---- 9 files changed, 39 insertions(+), 27 deletions(-) diff --git a/src/animations/Carousel.js b/src/animations/Carousel.js index 50f4ba4..624fbf7 100644 --- a/src/animations/Carousel.js +++ b/src/animations/Carousel.js @@ -6,11 +6,11 @@ import { animDuration } from '../utils/store' /* ** Transition In */ -export const animateIn = () => { +export const animateIn = scope => { // Card: Active const cardActive = ScrollOut({ once: true, - targets: '.gallery__photo--active', + targets: scope.querySelector('.gallery__photo--active'), onShown (el) { anime({ targets: el, @@ -25,7 +25,7 @@ export const animateIn = () => { // Card: Prev const cardPrev = ScrollOut({ once: true, - targets: '.gallery__photo--prev', + targets: scope.querySelector('.gallery__photo--prev'), onShown (el) { anime({ targets: el, @@ -41,7 +41,7 @@ export const animateIn = () => { // Card: Prev const cardNext = ScrollOut({ once: true, - targets: '.gallery__photo--next', + targets: scope.querySelector('.gallery__photo--next'), onShown (el) { anime({ targets: el, diff --git a/src/animations/Locations.js b/src/animations/Locations.js index 0c471a1..72aca46 100644 --- a/src/animations/Locations.js +++ b/src/animations/Locations.js @@ -6,10 +6,10 @@ import { animDuration } from '../utils/store' /* ** Transition In */ -export const animateIn = () => { +export const animateIn = scope => { // Each location const locations = ScrollOut({ - targets: '#locations_list .location', + targets: scope.querySelectorAll('.location'), onShown (el) { // Timeline const tl = anime.timeline({ diff --git a/src/animations/TitleSite.js b/src/animations/TitleSite.js index 57528a5..a91693e 100644 --- a/src/animations/TitleSite.js +++ b/src/animations/TitleSite.js @@ -6,11 +6,11 @@ import { animDuration } from '../utils/store' /* ** Transition In */ -export const animateIn = callback => { +export const animateIn = scope => { // On scroll animation const title = ScrollOut({ once: true, - targets: '.title-location--inline', + targets: scope, onShown (el) { // Each letters anime({ diff --git a/src/animations/Transition.js b/src/animations/Transition.js index 18cad46..7ced515 100644 --- a/src/animations/Transition.js +++ b/src/animations/Transition.js @@ -5,21 +5,23 @@ import { animDuration, animDurationLong } from '../utils/store' /* ** Transition In */ -export const animateIn = () => { +export const animateIn = scope => { // Panel itself const transition = anime({ - targets: '#transition', + targets: scope, height: ['100%', '100%'], + scale: [1.1, 1], opacity: [0, 1], - duration: 200, + duration: 400, delay: 0, easing: 'easeInOutQuart' }) // Globe icon const globe = anime({ - targets: '#transition svg', + targets: scope.querySelector('svg'), opacity: [0, 1], - duration: 200, + translateY: [32, 0], + duration: 400, delay: 0, easing: 'easeInOutQuart' }) @@ -30,10 +32,10 @@ export const animateIn = () => { /* ** Transition Out */ -export const animateOut = callback => { +export const animateOut = (scope, callback) => { // Panel itself const transition = anime({ - targets: '#transition', + targets: scope, height: ['100%', 0], duration: animDurationLong, delay: 800, @@ -43,7 +45,7 @@ export const animateOut = callback => { // Title const title = anime({ - targets: '#transition .title-location', + targets: scope.querySelector('.title-location'), opacity: 0, duration: 600, delay: 1400, @@ -52,7 +54,7 @@ export const animateOut = callback => { // Globe icon const globe = anime({ - targets: '#transition svg', + targets: scope.querySelector('svg'), opacity: 0, duration: 600, delay: 1400, diff --git a/src/atoms/TitleSite.svelte b/src/atoms/TitleSite.svelte index 6d9e89e..3debd30 100644 --- a/src/atoms/TitleSite.svelte +++ b/src/atoms/TitleSite.svelte @@ -5,17 +5,20 @@ // Animations import { animateIn } from '../animations/TitleSite.js' + // Variables + let scope + /* ** Run code on component mount */ onMount(() => { // Entering transition - animateIn() + animateIn(scope) }) -
+
{@html lettersToSpan('Houses')} diff --git a/src/molecules/Photo.svelte b/src/molecules/Photo.svelte index 9b99bd4..8d0ada4 100644 --- a/src/molecules/Photo.svelte +++ b/src/molecules/Photo.svelte @@ -9,7 +9,7 @@ export let photo export let index export let layout = 'list' - let photoElement + let scope // Default size for the image const defaultWidth = 900 @@ -25,6 +25,7 @@ ** Run code on browser only */ onMount(() => { + animateIn(scope) // Parallax on photo when the image has been loaded // const parallaxNumber = basicScroll.default.create({ // elem: photoElement.querySelector('.photo__number'), @@ -48,6 +49,7 @@ bind:this={photoElement} in:fly="{{ y: 40, duration: 1000, easing: quartOut }}" > +

{photo.name.replace(', ', ',\n')}

diff --git a/src/organisms/Carousel.svelte b/src/organisms/Carousel.svelte index 82dc260..fb0090b 100644 --- a/src/organisms/Carousel.svelte +++ b/src/organisms/Carousel.svelte @@ -18,6 +18,7 @@ export let init = undefined // Variables + let scope let hover let currentIndex = 0 $: currentPhoto = photos[currentIndex] || null @@ -93,7 +94,7 @@ */ onMount(() => { // Entering transition - animateIn() + animateIn(scope) // Hover function hover = event => { @@ -138,6 +139,7 @@
diff --git a/src/organisms/Locations.svelte b/src/organisms/Locations.svelte index b61b528..d85816c 100644 --- a/src/organisms/Locations.svelte +++ b/src/organisms/Locations.svelte @@ -14,6 +14,7 @@ // Variables const transitionDuration = 800 + let list let filterLocations let continentsToDisplay = [] let continentsFiltered = [] @@ -35,7 +36,7 @@ */ onMount(() => { // Entering transition - animateIn() + animateIn(list) }) @@ -57,7 +58,7 @@ {/each} -
+
{#each filteredLocations as location (location.id)}
{ // Run the loader animation (only after first load) if (!firstLoad && process.browser) { - animateIn() + animateIn(scope) } // Set pageReady to false (?) pageReady.set(false) @@ -40,10 +41,11 @@ window.scrollTo(0,0) // 3. Hide the loader // Also sets firstLoad to false in order to show the second icon afterwards - animateOut(() => firstLoad = false) - }, 200) // This duration allows to not come over the transition In + animateOut(scope, () => firstLoad = false) + }, 400) // This duration allows to not come over the transition In // [OU ALORS] les pages changent la valeur de loaded plus tard + // Scroll back to top of page // 4. Run the page's transition in, but a little bit before the end of the loader setTimeout(() => { pageTransition.onAnimationEnd() @@ -52,7 +54,7 @@ }) -