flayks/housesof
2
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Run page animations onMount instead of browser

Browse Source
This commit is contained in:
Félix Péault
2022-05-30 21:57:04 +02:00
parent 7a165721d9
commit d3f74be59e
8 changed files with 279 additions and 347 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
src/routes/[country]/[location]/[photo].svelte
View File

@@ -213,15 +213,12 @@
}
onMount(() => {
/**
* Transition: Anime timeline
* Animations
*/
let timeline: AnimeTimelineInstance
if (browser) {
requestAnimationFrame(() => {
// Setup animations
timeline = anime.timeline({
const timeline: AnimeTimelineInstance = anime.timeline({
duration: 1600,
easing: 'easeOutQuart',
})
@@ -286,15 +283,9 @@
delay: anime.stagger(200),
duration: 1000,
}, 700)
})
}
onMount(() => {
// Transition in
requestAnimationFrame(() => {
timeline.play()
})
requestAnimationFrame(timeline.play)
})
</script>

86
src/routes/[country]/[location]/index.svelte
View File

@@ -1,5 +1,4 @@
<script lang="ts">
import { browser } from '$app/env'
import { navigating, page } from '$app/stores'
import { onMount } from 'svelte'
import anime from 'animejs'
@@ -108,14 +107,44 @@
}
/**
* Transition: Anime timeline
*/
let timeline: AnimeTimelineInstance
onMount(() => {
// Photos IntersectionObserver
observerPhotos = new IntersectionObserver(entries => {
entries.forEach(({ isIntersecting, target }: IntersectionObserverEntry) => {
target.classList.toggle('is-visible', isIntersecting)
if (browser) {
requestAnimationFrame(() => {
timeline = anime.timeline({
// Run effect once
isIntersecting && observerPhotos.unobserve(target)
})
}, {
threshold: 0.3,
rootMargin: '0px 0px 0px'
})
// Photos MutationObserver
mutationPhotos = new MutationObserver((mutationsList, observer) => {
// When adding new childs
for (const mutation of mutationsList) {
if (mutation.type === 'childList') {
// Observe new items
mutation.addedNodes.forEach((item: HTMLElement) => observerPhotos.observe(item))
}
}
})
mutationPhotos.observe(photosListEl, {
childList: true,
})
// Observe existing elements
const existingPhotos = photosListEl.querySelectorAll('.house')
existingPhotos.forEach(el => observerPhotos.observe(el))
/**
* Animations
*/
// Transition in
const timeline: AnimeTimelineInstance = anime.timeline({
duration: 1600,
easing: 'easeOutQuart',
autoplay: false,
@@ -149,47 +178,8 @@
translateY: ['10%', 0],
opacity: [0, 1],
}, 900 + ($navigating ? DURATION.PAGE_IN : 0))
})
}
onMount(() => {
// Photos IntersectionObserver
observerPhotos = new IntersectionObserver(entries => {
entries.forEach(({ isIntersecting, target }: IntersectionObserverEntry) => {
target.classList.toggle('is-visible', isIntersecting)
// Run effect once
isIntersecting && observerPhotos.unobserve(target)
})
}, {
threshold: 0.3,
rootMargin: '0px 0px 0px'
})
// Photos MutationObserver
mutationPhotos = new MutationObserver((mutationsList, observer) => {
// When adding new childs
for (const mutation of mutationsList) {
if (mutation.type === 'childList') {
// Observe new items
mutation.addedNodes.forEach((item: HTMLElement) => observerPhotos.observe(item))
}
}
})
mutationPhotos.observe(photosListEl, {
childList: true,
})
// Observe existing elements
const existingPhotos = photosListEl.querySelectorAll('.house')
existingPhotos.forEach(el => observerPhotos.observe(el))
// Transition in
requestAnimationFrame(() => {
timeline.play()
})
requestAnimationFrame(timeline.play)
// Destroy

19
src/routes/credits.svelte
View File

@@ -1,5 +1,4 @@
<script lang="ts">
import { browser } from '$app/env'
import { onMount } from 'svelte'
import anime from 'animejs'
import type { AnimeTimelineInstance } from 'animejs'
@@ -13,16 +12,12 @@
export let data: any
onMount(() => {
/**
* Transition: Anime timeline
* Animations
*/
let timeline: AnimeTimelineInstance
if (browser) {
requestAnimationFrame(() => {
// Setup animations
timeline = anime.timeline({
const timeline: AnimeTimelineInstance = anime.timeline({
duration: 1600,
easing: 'easeOutQuart',
autoplay: false,
@@ -51,15 +46,9 @@
translateY: 0,
delay: anime.stagger(350),
}, 1100)
})
}
onMount(() => {
// Transition in
requestAnimationFrame(() => {
timeline.play()
})
requestAnimationFrame(timeline.play)
})
</script>

68
src/routes/photos.svelte
View File

@@ -1,5 +1,4 @@
<script lang="ts">
import { browser } from '$app/env'
import { page } from '$app/stores'
import { goto } from '$app/navigation'
import { getContext, onMount } from 'svelte'
@@ -245,42 +244,6 @@
}
/**
* Transition: Anime timeline
*/
let timeline: AnimeTimelineInstance
if (browser) {
requestAnimationFrame(() => {
// Setup animations
timeline = anime.timeline({
duration: 1600,
easing: 'easeOutQuart',
autoplay: false,
})
// Reveal text
timeline.add({
targets: '.photos__intro .discover',
translateY: [16, 0],
opacity: [0, 1],
}, 900)
// Filters
timeline.add({
targets: '.photos__intro .filter',
translateY: [16, 0],
opacity: [0, 1],
complete ({ animatables }) {
const element = animatables[0].target
// Remove style to not interfere with CSS when scrolling back up over photos
element.removeAttribute('style')
}
}, 1300)
})
}
onMount(() => {
/**
* Observers
@@ -316,11 +279,38 @@
const existingPhotos = photosGridEl.querySelectorAll('.photo')
existingPhotos.forEach(el => observerPhotos.observe(el))
/**
* Animations
*/
// Transition in
requestAnimationFrame(() => {
timeline.play()
const timeline: AnimeTimelineInstance = anime.timeline({
duration: 1600,
easing: 'easeOutQuart',
autoplay: false,
})
// Reveal text
timeline.add({
targets: '.photos__intro .discover',
translateY: [16, 0],
opacity: [0, 1],
}, 900)
// Filters
timeline.add({
targets: '.photos__intro .filter',
translateY: [16, 0],
opacity: [0, 1],
complete ({ animatables }) {
const element = animatables[0].target
// Remove style to not interfere with CSS when scrolling back up over photos
element.removeAttribute('style')
}
}, 1300)
// Play animation
requestAnimationFrame(timeline.play)
// Destroy
return () => {

44
src/routes/shop/[type]-[name].svelte
View File

@@ -1,5 +1,4 @@
<script lang="ts">
import { browser } from '$app/env'
import { getContext, onMount } from 'svelte'
import anime from 'animejs'
import type { AnimeTimelineInstance } from 'animejs'
@@ -25,14 +24,24 @@
let scrolledPastIntro = false
/**
* Transition: Anime timeline
*/
let timeline: AnimeTimelineInstance
onMount(() => {
// Reveal the nav past the Intro
navObserver = new IntersectionObserver(entries => {
entries.forEach(entry => {
scrolledPastIntro = !entry.isIntersecting
})
}, {
threshold: 0,
rootMargin: '0px 0px 0px'
})
navObserver.observe(introEl)
if (browser) {
requestAnimationFrame(() => {
timeline = anime.timeline({
/**
* Animations
*/
// Setup animations
const timeline: AnimeTimelineInstance = anime.timeline({
duration: 1600,
easing: 'easeOutQuart',
autoplay: false,
@@ -59,26 +68,9 @@
translateY: [100, 0],
delay: anime.stagger(250),
}, 700)
})
}
onMount(() => {
// Reveal the nav past the Intro
navObserver = new IntersectionObserver(entries => {
entries.forEach(entry => {
scrolledPastIntro = !entry.isIntersecting
})
}, {
threshold: 0,
rootMargin: '0px 0px 0px'
})
navObserver.observe(introEl)
// Transition in
requestAnimationFrame(() => {
timeline.play()
})
requestAnimationFrame(timeline.play)
// Destroy

47
src/routes/shop/index.svelte
View File

@@ -1,5 +1,4 @@
<script lang="ts">
import { browser } from '$app/env'
import { getContext, onMount } from 'svelte'
import anime from 'animejs'
import type { AnimeTimelineInstance } from 'animejs'
@@ -8,7 +7,6 @@
import PageTransition from '$components/PageTransition.svelte'
import Metas from '$components/Metas.svelte'
import Image from '$components/atoms/Image.svelte'
import SiteTitle from '$components/atoms/SiteTitle.svelte'
import ButtonCart from '$components/atoms/ButtonCart.svelte'
import ShopLocationSwitcher from '$components/molecules/ShopLocationSwitcher.svelte'
import PostersGrid from '$components/organisms/PostersGrid.svelte'
@@ -20,18 +18,28 @@
const { shop, shopLocations, posters } = getContext('shop')
let introEl: HTMLElement
let navObserver: IntersectionObserver
let scrolledPastIntro = false
var navObserver: IntersectionObserver
var scrolledPastIntro = false
onMount(() => {
// Reveal the nav past the Intro
navObserver = new IntersectionObserver(entries => {
entries.forEach(entry => {
scrolledPastIntro = !entry.isIntersecting
})
}, {
threshold: 0,
rootMargin: '0px 0px 0px'
})
navObserver.observe(introEl)
/**
* Transition: Anime timeline
* Animations
*/
let timeline: AnimeTimelineInstance
if (browser) {
requestAnimationFrame(() => {
timeline = anime.timeline({
// Setup animations
const timeline: AnimeTimelineInstance = anime.timeline({
duration: 1600,
easing: 'easeOutQuart',
autoplay: false,
@@ -58,26 +66,9 @@
translateY: [100, 0],
delay: anime.stagger(250),
}, 700)
})
}
onMount(() => {
// Reveal the nav past the Intro
navObserver = new IntersectionObserver(entries => {
entries.forEach(entry => {
scrolledPastIntro = !entry.isIntersecting
})
}, {
threshold: 0,
rootMargin: '0px 0px 0px'
})
navObserver.observe(introEl)
// Transition in
requestAnimationFrame(() => {
timeline.play()
})
requestAnimationFrame(timeline.play)
// Destroy

21
src/routes/subscribe.svelte
View File

@@ -1,5 +1,4 @@
<script lang="ts"> import { fade } from 'svelte/transition'
import { browser } from '$app/env'
<script lang="ts">
import { onMount } from 'svelte'
import dayjs from 'dayjs'
import anime from 'animejs'
@@ -16,16 +15,12 @@
export let issues: any
onMount(() => {
/**
* Transition: Anime timeline
* Animations
*/
let timeline: AnimeTimelineInstance
if (browser) {
requestAnimationFrame(() => {
// Setup animations
timeline = anime.timeline({
const timeline: AnimeTimelineInstance = anime.timeline({
duration: 1600,
easing: 'easeOutQuart',
autoplay: false,
@@ -52,15 +47,9 @@
delay: anime.stagger(150),
duration: 1000,
}, 1000)
})
}
onMount(() => {
// Transition in
requestAnimationFrame(() => {
timeline.play()
})
requestAnimationFrame(timeline.play)
})
</script>

2
src/utils/functions/index.ts
View File

@@ -113,7 +113,7 @@ export const getRandomElement = (array: any[]): any => {
/**
* Get a DOM element's position
*/
export const getPosition = (node, scope?: HTMLElement) => {
export const getPosition = (node: any, scope?: HTMLElement) => {
const root = scope || document
let offsetTop = node.offsetTop
let offsetLeft = node.offsetLeft