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

Viewer: Fix reveal animation
All checks were successful
continuous-integration/drone/push Build is passing
Details

Browse Source
This commit is contained in:
Félix Péault
2020-04-08 19:33:57 +02:00
parent e0abb558d8
commit b7accde2c3
1 changed files with 10 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
src/animations/viewer.js
View File

@@ -15,10 +15,9 @@ export const animateIn = () => {
// Carousel // Carousel
tl.add({ tl.add({
targets: viewer.querySelector('.carousel'), targets: viewer.querySelector('.carousel .wrap'),
opacity: [0, 1], opacity: [0, 1],
translateY: window.innerWidth >= 768 ? [32, 0] : ['-33%', '-37%'], translateY: ['-4%', 0]
complete: event => event.animatables[0].target.removeAttribute('style')
}) })
// Carousel: Number // Carousel: Number
@@ -28,6 +27,13 @@ export const animateIn = () => {
translateY: [window.innerWidth >= 768 ? -24 : 24, 0] translateY: [window.innerWidth >= 768 ? -24 : 24, 0]
}, 0) }, 0)
// Dots
tl.add({
targets: viewer.querySelectorAll('.carousel__dots'),
translateY: [16, 0],
opacity: [0, 1]
}, 150)
// Buttons // Buttons
tl.add({ tl.add({
targets: viewer.querySelectorAll('.tip, .viewer__buttons a'), targets: viewer.querySelectorAll('.tip, .viewer__buttons a'),
@@ -35,4 +41,5 @@ export const animateIn = () => {
opacity: [0, 1], opacity: [0, 1],
delay: anime.stagger(120), delay: anime.stagger(120),
}, 400) }, 400)
} }