Fix Intro?
All checks were successful
continuous-integration/drone/push Build is passing

This commit is contained in:
2020-04-06 22:33:47 +02:00
parent 380d155350
commit f414457172
5 changed files with 14 additions and 13 deletions

View File

@@ -10,7 +10,7 @@ export const animateIn = scope => {
// Each location (reveal on scroll)
const locations = ScrollOut({
targets: scope.querySelectorAll('.location'),
onShown (el) {
onShown: el => {
// Image
anime({
targets: el.querySelector('img'),

View File

@@ -4,11 +4,9 @@ import { quartOut } from 'svelte/easing'
// Crossfade transition
export const [send, receive] = crossfade({
duration: d => Math.sqrt(d * 200),
fallback(node, params) {
fallback (node, params) {
const style = getComputedStyle(node)
const transform = style.transform === 'none' ? '' : style.transform
return {
duration: 600,
easing: quartOut,

View File

@@ -53,7 +53,7 @@ export const animateIn = () => {
const titleOf = ScrollOut({
once: true,
targets: '#title-of',
onShown (el) {
onShown: el => {
anime({
targets: el.querySelectorAll('span'),
translateY: ['100%', 0],
@@ -65,6 +65,7 @@ export const animateIn = () => {
})
// Title: World (reveal on scroll)
const titleWorld = document.getElementById('title-world')
const titleWorldTranslate = anime({
targets: document.getElementById('title-world'),
translateX: ['5%', '-3%'],
@@ -72,10 +73,11 @@ export const animateIn = () => {
autoplay: false,
duration: animDuration
})
const titleWorld = ScrollOut({
const titleWorldAnime = parallaxAnime(titleWorld, titleWorldTranslate)
const titleWorldScroll = ScrollOut({
once: true,
targets: document.getElementById('title-world'),
onShown (el) {
targets: titleWorld,
onShown: () => {
const titleWorldLetters = anime({
targets: el.querySelectorAll('span'),
translateY: ['100%', 0],
@@ -83,9 +85,11 @@ export const animateIn = () => {
delay: anime.stagger(70),
duration: animDuration
})
window.addEventListener('scroll', throttle(() => parallaxAnime(el, titleWorldTranslate), 10))
requestAnimationFrame(() => parallaxAnime(el, titleWorldTranslate), 50)
window.addEventListener('scroll', throttle(() => titleWorldAnime, 10))
requestAnimationFrame(() => titleWorldAnime)
},
onHidden: () => window.removeEventListener('scroll', parallaxAnime)
onHidden: () => {
if (parallaxAnime) window.removeEventListener('scroll', parallaxAnime)
}
})
}