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

☠️ RESET for v2

Browse Source
This commit is contained in:
Félix Péault
2021-09-14 13:00:12 +02:00
parent 511b0c85e5
commit bdbf511a75
124 changed files with 1612 additions and 11094 deletions
Download Patch File Download Diff File Expand all files Collapse all files

76
src/animations/Carousel.js
View File

@@ -1,76 +0,0 @@
import anime from 'animejs'
import ScrollOut from 'scroll-out'
import { animDuration, animDelay } from 'utils/store'
/*
** Transition In
*/
export const animateIn = scope => {
const tl = anime.timeline({
easing: 'easeOutQuart',
duration: animDuration,
autoplay: false
})
// Carousel
tl.add({
targets: scope,
translateY: [window.innerWidth <= 768 ? 16 : 32, 0],
translateZ: [0, 0],
opacity: [0, 1],
complete: event => event.animatables[0].target.removeAttribute('style')
})
// Photo: Active
tl.add({
targets: scope.querySelector('.is-active picture'),
translateY: [8, 0],
translateZ: [0, 0],
complete: event => event.animatables[0].target.removeAttribute('style')
}, 100)
// Photo: Prev
tl.add({
targets: scope.querySelector('.is-prev picture'),
translateY: [8, 0],
translateX: [64, 0],
translateZ: [0, 0],
rotate: window.innerWidth >= 768 ? [-2, 0] : [0, 0],
complete: event => event.animatables[0].target.removeAttribute('style')
}, 100)
// Photo: Next
tl.add({
targets: scope.querySelector('.is-next picture'),
translateY: [8, 0],
translateX: [-48, 0],
translateZ: [0, 0],
rotate: window.innerWidth >= 768 ? [2, 0] : [0, 0],
complete: event => event.animatables[0].target.removeAttribute('style')
}, 100)
// Reveal on scroll
let visible = false
setTimeout(() => {
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) {
setTimeout(() => tl.restart(), 10)
}
// If revealed on load, add a delay
else {
setTimeout(() => tl.restart(), animDelay * 2)
}
}
})
}, 10)
}

58
src/animations/Locations.js
View File

@@ -1,58 +0,0 @@
import anime from 'animejs'
import ScrollOut from 'scroll-out'
import { animDurationLong } from 'utils/store'
/*
** Transition In
*/
export const animateIn = scope => {
let delay = 0
// Each location (reveal on scroll)
scope.querySelectorAll('.location').forEach(location => {
const tl = anime.timeline({
easing: 'easeOutQuart',
duration: 600,
autoplay: false,
delay,
complete: () => {
// Reset delay
delay = 0
}
})
// Image
tl.add({
targets: location.querySelector('img'),
scale: [1.3, 1],
opacity: [0, 1],
translateZ: [0, 0],
duration: 1800
}, 100)
// Name
tl.add({
targets: location.querySelector('h3'),
translateY: ['100%', 0],
translateZ: [0, 0],
}, 150)
// Country
tl.add({
targets: location.querySelector('p'),
translateY: ['100%', 0],
translateZ: [0, 0]
}, 200)
// Increase delay between locations
delay += 65
// Scroll reveal
ScrollOut({
once: true,
targets: location,
onShown: () => tl.restart()
})
})
}

95
src/animations/Photo.js
View File

@@ -1,95 +0,0 @@
import anime from 'animejs'
import ScrollOut from 'scroll-out'
import imagesLoaded from 'imagesloaded'
import { throttle, parallaxAnime } from 'utils/functions'
import { animDuration } from 'utils/store'
/*
** Transition In
*/
export const animateIn = scope => {
const tlLocation = anime.timeline({
easing: 'easeOutQuart',
duration: 1000,
autoplay: false
})
// Title
tlLocation.add({
targets: scope.querySelectorAll('.photo__location .line span'),
translateY: ['120%', 0],
translateZ: [0, 0],
delay: anime.stagger(120)
}, 200)
// Description
tlLocation.add({
targets: scope.querySelectorAll('.photo__location p'),
opacity: [0, 1],
duration: animDuration
}, 400)
// Reveal on scroll
const locationScroll = ScrollOut({
once: true,
targets: scope,
onShown: () => tlLocation.restart()
})
// Image (reveal on scroll)
const photoImage = scope.querySelector('.photo__image')
const photoReveal = anime.timeline({
easing: 'easeOutQuart',
duration: 2000,
autoplay: false
})
photoReveal.add({
targets: scope.querySelector('.photo__picture'),
opacity: [0, 1]
}, 50)
photoReveal.add({
targets: scope.querySelector('.photo__picture img'),
scale: [1.12, 1],
translateZ: [0, 0]
}, 50)
// Show photo when image is loaded
imagesLoaded(photoImage, instance => {
const photoScroll = ScrollOut({
once: true,
targets: photoImage,
onShown: () => photoReveal.restart()
})
})
// Number parallax on scroll
const media768 = window.matchMedia('(min-width: 768px)')
const number = scope.querySelector('.photo__number')
const numberPallax = anime({
targets: number.querySelector('span'),
translateY: (window.innerWidth <= 768) ? ['0%', '20%'] : ['-20%', '20%'],
easing: 'linear',
duration: 2000,
autoplay: false
})
const numberPallaxAnime = () => parallaxAnime(number, numberPallax)
const numberPallaxScroll = matchMedia => {
if (matchMedia.matches) {
const scroll = ScrollOut({
targets: scope,
onShown: () => {
window.addEventListener('scroll', throttle(numberPallaxAnime, 50))
requestAnimationFrame(numberPallaxAnime)
},
onHidden: () => {
if (parallaxAnime) window.removeEventListener('scroll', parallaxAnime)
}
})
}
}
// Listen on screen size to run the function
media768.addListener(numberPallaxAnime)
numberPallaxScroll(media768)
}

31
src/animations/TitleSite.js
View File

@@ -1,31 +0,0 @@
import anime from 'animejs'
import ScrollOut from 'scroll-out'
import { firstLoad, animDurationLong, animDelay } from 'utils/store'
let firstLoadValue
firstLoad.subscribe(store => firstLoadValue = store)
/*
** Transition In
*/
export const animateIn = (scope, init) => {
// Stagger each letters and words
const letters = anime({
targets: scope.querySelectorAll('span, em span'),
translateY: ['100%', 0],
translateZ: [0, 0],
easing: 'easeOutQuart',
duration: 1000,
delay: anime.stagger(40, { start: init ? 0 : (firstLoadValue) ? animDurationLong : animDelay }),
autoplay: false
})
// On scroll animation
requestAnimationFrame(() => {
const title = ScrollOut({
once: true,
targets: scope,
onShown: () => requestAnimationFrame(() => letters.restart())
})
})
}

16
src/animations/Transition.js
View File

@@ -1,16 +0,0 @@
import { quartInOut } from 'svelte/easing'
/*
** Animation Out: Background
*/
export const panelBackgroundOut = (node, params) => {
return {
delay: params.delay || 0,
duration: params.duration || 400,
easing: params.easing || quartInOut,
css: (t, u) => `
transform: scaleY(${t})
`
}
}

25
src/animations/crossfade.js
View File

@@ -1,25 +0,0 @@
import { crossfade } from 'svelte/transition'
import { quartOut } from 'svelte/easing'
// Crossfade transition
export const [send, receive] = crossfade({
duration: d => Math.sqrt(d * 200),
fallback: (node, params) => {
const {
duration = 600,
easing = quartOut,
start = 0.85
} = params
const style = getComputedStyle(node)
const transform = style.transform === 'none' ? '' : style.transform
const sd = 1 - start
return {
duration,
easing,
css: (t, u) => `
transform: ${transform} scale(${1 - (sd * u)});
opacity: ${t}
`
}
}
})

93
src/animations/index.js
View File

@@ -1,93 +0,0 @@
import anime from 'animejs'
import ScrollOut from 'scroll-out'
import { animDuration, animDelay } from 'utils/store'
import { throttle, parallaxAnime } from 'utils/functions'
/*
** Transition In
*/
export const animateIn = () => {
// Title: Houses
const titleHouses = anime({
targets: document.querySelectorAll('#title-houses span'),
translateY: ['-70%', 0],
translateZ: [0, 0],
easing: 'easeOutQuart',
delay: anime.stagger(80, { start: animDelay }),
duration: animDuration
})
// Title: Parallax on scroll
const translate = anime({
targets: '#title-houses',
translateX: window.innerWidth <= 1920 ? ['25%', '-15%'] : ['7%', '-7%'],
translateZ: [0, 0],
easing: 'linear',
duration: animDuration,
autoplay: false
})
window.addEventListener('scroll', throttle(() => parallaxAnime(document.getElementById('title-houses'), translate), 5))
requestAnimationFrame(() => parallaxAnime(document.getElementById('title-houses'), translate))
// Intro: Description
const introDescription = anime({
targets: document.getElementById('intro-description').querySelectorAll('p, a'),
opacity: [0, 1],
translateY: [8, 0],
translateZ: [0, 0],
easing: 'easeOutQuart',
duration: animDuration,
delay: anime.stagger(200, { start: animDelay + 200 })
})
// Title: Of (reveal on scroll)
const titleOf = document.getElementById('title-of')
const titleOfReveal = anime({
targets: titleOf.querySelectorAll('span'),
translateY: ['100%', 0],
translateZ: [0, 0],
easing: 'easeOutQuart',
delay: anime.stagger(70),
duration: animDuration,
autoplay: false
})
const titleOfScroll = ScrollOut({
once: true,
targets: titleOf,
onShown: () => titleOfReveal.restart()
})
// Title: World (reveal on scroll)
const titleWorld = document.getElementById('title-world')
const titleWorldReveal = anime({
targets: titleWorld.querySelectorAll('span'),
translateY: ['100%', 0],
translateZ: [0, 0],
easing: 'easeOutQuart',
delay: anime.stagger(70),
duration: animDuration,
autoplay: false
})
const titleWorldParallax = anime({
targets: titleWorld,
translateX: ['5%', '-3%'],
translateZ: [0, 0],
easing: 'linear',
duration: animDuration,
autoplay: false
})
const titleWorldAnime = () => parallaxAnime(titleWorld, titleWorldParallax)
const titleWorldScroll = ScrollOut({
once: true,
targets: titleWorld,
onShown: () => {
titleWorldReveal.restart()
window.addEventListener('scroll', throttle(titleWorldAnime, 10))
requestAnimationFrame(titleWorldAnime)
},
onHidden: () => {
if (parallaxAnime) window.removeEventListener('scroll', parallaxAnime)
}
})
}

22
src/animations/page.js
View File

@@ -1,22 +0,0 @@
import anime from 'animejs'
import { animDuration, animDelay } from 'utils/store'
/*
** Transition In
*/
export const animateIn = () => {
const tl = anime.timeline({
easing: 'easeOutQuart',
duration: animDuration
})
// Simple slide and fade on each part of the page
tl.add({
targets: document.querySelectorAll('.page__part, .globe'),
opacity: [0, 1],
translateY: [8, 0],
translateZ: [0, 0],
delay: anime.stagger(200, { start: animDelay })
})
}

62
src/animations/place.js
View File

@@ -1,62 +0,0 @@
import anime from 'animejs'
import Rellax from 'rellax'
import { animDuration, animDelay } from 'utils/store'
/*
** Transition In
*/
export const animateIn = () => {
const tl = anime.timeline({
duration: animDuration,
delay: animDelay, // Delay in AnimeJS waits to run but sets the starting style as opposed to a setTimeout
easing: 'easeOutQuart'
})
// Title: Houses
tl.add({
targets: '.place__title_houses',
translateY: ['150%', 0],
translateZ: [0, 0]
})
// Title: Of
tl.add({
targets: '.place__title_of',
opacity: [0, 1]
}, 600)
// Title: Place name
tl.add({
targets: '.place__title_name',
translateY: ['150%', 0],
translateZ: [0, 0]
}, 150)
// Switcher link
tl.add({
targets: '.place__title .button-control',
scale: [0.95, 1],
opacity: [0, 1]
}, 500)
// Illustration
tl.add({
targets: '.place__illustration',
scale: [1.05, 1],
translateZ: [0, 0],
opacity: [0, 1]
}, 0)
// Description
tl.add({
targets: '.place__description',
opacity: [0, 1],
translateY: [24, 0],
translateZ: [0, 0]
}, 450)
/*
** Parallax
*/
const rellax = new Rellax('[data-rellax-speed]')
}

40
src/animations/viewer.js
View File

@@ -1,40 +0,0 @@
import anime from 'animejs'
import { animDuration, animDelay } from 'utils/store'
/*
** Transition In
*/
export const animateIn = () => {
const viewer = document.querySelector('.viewer')
const tl = anime.timeline({
easing: 'easeOutQuart',
duration: animDuration,
delay: 1400
})
// Carousel: Number
tl.add({
targets: viewer.querySelector('.counter'),
opacity: [0, 1],
translateY: [window.innerWidth >= 768 ? -24 : 24, 0]
}, 0)
// Dots
tl.add({
targets: viewer.querySelectorAll('.carousel__dots'),
translateY: [16, 0],
translateZ: [0, 0],
opacity: [0, 1]
}, 150)
// Buttons
tl.add({
targets: viewer.querySelectorAll('.tip, .viewer__buttons a'),
translateY: [-32, 0],
translateZ: [0, 0],
opacity: [0, 1],
delay: anime.stagger(120),
}, 400)
}