Locations: Rework the Crossfade transition
Add a start value for the scale to make it more elegant
This commit is contained in:
@@ -4,14 +4,20 @@ 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 {
|
||||
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: 600,
|
||||
easing: quartOut,
|
||||
css: t => `
|
||||
transform: ${transform} scale(${t});
|
||||
duration,
|
||||
easing,
|
||||
css: (t, u) => `
|
||||
transform: ${transform} scale(${1 - (sd * u)});
|
||||
opacity: ${t}
|
||||
`
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user