]>
git.r.bdr.sh - rbdr/forum/blob - src/animations/blink.js
1 import { sineOut
} from 'svelte/easing';
3 export const blink
= function whoosh(node
, params
) {
5 const originalWidth
= parseFloat(getComputedStyle(node
).width
);
6 const originalHeight
= parseFloat(getComputedStyle(node
).height
);
9 delay: params
.delay
|| 0,
10 duration: params
.duration
|| 400,
11 easing: params
.easing
|| sineOut
,
14 const halfWidth
= originalWidth
/ 2;
15 const halfHeight
= originalHeight
/ 2;
16 // const padding = t < 0.8 ? halfWidth * (1 - t) / 0.8 : halfWidth / 2 + 1;
17 const height
= t
<= 0.2 ? (originalHeight
* t
/ 0.2) : originalHeight
;
18 const marginY
= t
<= 0.2 ? (halfHeight
* (1 - t
/ 0.2)) : 0;
19 const width
= t
> 0.2 ? ((t
- 0.2) / 0.8) * originalWidth : 0;
20 const marginX
= t
> 0.2 ? (1 - ((t
- 0.2) / 0.8)) * halfWidth : halfWidth
;
22 return `width: ${width}px; height: ${height}px; margin: ${marginY}px ${marginX}px`;