git.r.bdr.sh - rbdr/canvas/blob - src/lib/animations/blink.js

   1 import { sineInOut } from 'svelte/easing';
   2
   3 export const blink = function blink(node, params) {
   4         const originalWidth = parseFloat(getComputedStyle(node).width);
   5         const originalHeight = parseFloat(getComputedStyle(node).height);
   6
   7         return {
   8                 delay: params.delay || 0,
   9                 duration: params.duration || 400,
  10                 easing: params.easing || sineInOut,
  11                 css: (t) => {
  12                         const width = Math.round(t <= 0.2 ? (originalWidth * t) / 0.2 : originalWidth);
  13                         const height = Math.round(t > 0.2 ? ((t - 0.2) / 0.8) * originalHeight : 0);
  14
  15                         return `width: ${width}px; height: ${height}px;`;
  16                 }
  17         };
  18 };