Optimize animations and transitions

will-change is apparently not enough to run GPU-enabled animations, use translateZ on top of it
This commit is contained in:
2020-04-09 20:23:24 +02:00
parent 7a44d5b0ed
commit be0f4c8b59
16 changed files with 75 additions and 43 deletions

View File

@@ -15,7 +15,8 @@ export const animateIn = () => {
// Title: Houses
tl.add({
targets: '.place__title_houses',
translateY: ['150%', 0]
translateY: ['150%', 0],
translateZ: [0, 0]
})
// Title: Of
tl.add({
@@ -25,7 +26,8 @@ export const animateIn = () => {
// Title: Place name
tl.add({
targets: '.place__title_name',
translateY: ['150%', 0]
translateY: ['150%', 0],
translateZ: [0, 0]
}, 150)
// Switcher link
@@ -46,6 +48,7 @@ export const animateIn = () => {
tl.add({
targets: '.place__description',
opacity: [0, 1],
translateY: [24, 0]
translateY: [24, 0],
translateZ: [0, 0]
}, 450)
}