]>
Commit | Line | Data |
---|---|---|
6347b8d9 RBR |
1 | import { sineOut } from 'svelte/easing'; |
2 | ||
3 | export const blink = function whoosh(node, params) { | |
4 | ||
5 | const originalWidth = parseFloat(getComputedStyle(node).width); | |
6 | const originalHeight = parseFloat(getComputedStyle(node).height); | |
7 | ||
8 | return { | |
9 | delay: params.delay || 0, | |
10 | duration: params.duration || 400, | |
11 | easing: params.easing || sineOut, | |
12 | css: (t, u) => { | |
13 | ||
14 | const halfWidth = originalWidth / 2; | |
15 | const halfHeight = originalHeight / 2; | |
16 | // const padding = t < 0.8 ? halfWidth * (1 - t) / 0.8 : halfWidth / 2 + 1; | |
58f7d521 RBR |
17 | const height = t <= 0.2 ? (originalHeight * t) / 0.2 : originalHeight; |
18 | const marginY = t <= 0.2 ? halfHeight * (1 - t / 0.2) : 0; | |
6347b8d9 | 19 | const width = t > 0.2 ? ((t - 0.2) / 0.8) * originalWidth : 0; |
58f7d521 | 20 | const marginX = t > 0.2 ? (1 - (t - 0.2) / 0.8) * halfWidth : halfWidth; |
6347b8d9 RBR |
21 | |
22 | return `width: ${width}px; height: ${height}px; margin: ${marginY}px ${marginX}px`; | |
23 | } | |
24 | }; | |
25 | }; |