@prostgles/prostgles 2.3.6-dev.1786548258

package/client/src/app/domToSVG/SVGif/animations/getSVGifZoomToAnimation.ts

@@ -0,0 +1,114 @@
+import { fixIndent } from "@common/utils";
+import type { SVGif } from "src/Testing";
+import { toFixed } from "../../utils/toFixed";
+import { getAnimationProperty } from "../getSVGif";
+import type { SVGifParsedScene } from "../getSVGifParsedScenes";
+import type { getSVGifTargetBBox } from "../getSVGifTargetBBox";
+
+export const getSVGifZoomToAnimation = (
+  viewport: { width: number; height: number },
+  { bbox: rawBBox }: Pick<ReturnType<typeof getSVGifTargetBBox>, "bbox">,
+  { svgDom, svgFileName }: Pick<SVGifParsedScene, "svgDom" | "svgFileName">,
+  animation: Extract<
+    SVGif.Animation,
+    { type: "zoomToElement" | "bringToFront" }
+  >,
+  {
+    sceneId,
+    sceneIndex,
+    totalDuration,
+    getPercent,
+    fromTime,
+  }: {
+    sceneIndex: number;
+    sceneId: string;
+    totalDuration: number;
+    getPercent: (time: number, increment?: 0.1 | -0.1) => number;
+    fromTime: number;
+  },
+  addToRootSvg: boolean,
+) => {
+  const {
+    elementSelector,
+    duration,
+    maxScale = 2,
+    type,
+    bringToFrontSelector,
+  } = animation;
+
+  const rootGId = svgDom.querySelector(":scope > g")?.id;
+  if (!rootGId) {
+    throw `No root <g> element with id found in SVG file ${svgFileName}. "type" animations require the SVG to have a root <g> element with an id.`;
+  }
+
+  const zoomInDuration = 500;
+  const zoomOutDuration = 500;
+  const waitBeforeZoomOut = 300;
+  const dwellDuration =
+    duration - zoomInDuration - zoomOutDuration - waitBeforeZoomOut;
+  if (dwellDuration < 500) {
+    throw [
+      `Duration ${duration}ms for "type" animation on element ${elementSelector} in SVG file ${svgFileName} is too short.`,
+      `Must be at least ${zoomInDuration + zoomOutDuration + waitBeforeZoomOut + 500}ms`,
+    ].join("\n");
+  }
+  const zoomInStartTime = fromTime;
+  const zoomInEndTime = fromTime + zoomInDuration;
+  const dwellEndTime = zoomInEndTime + dwellDuration;
+  const zoomOutStartTime = dwellEndTime + waitBeforeZoomOut;
+  const zoomOutEndTime = zoomOutStartTime + zoomOutDuration;
+
+  const adjustedBBox = {
+    x: rawBBox.x,
+    y: rawBBox.y,
+    height: rawBBox.height,
+    width: rawBBox.width,
+  };
+
+  const xPadding = 50;
+  const requiredScale = (svgDom.clientWidth - xPadding) / adjustedBBox.width;
+  const effectiveScale = toFixed(Math.min(requiredScale, maxScale));
+  const toPerc = getPercent(fromTime + duration);
+
+  // Calculate center of the element
+  const elementCenterX = toFixed(adjustedBBox.x + adjustedBBox.width / 2);
+  const elementCenterY = toFixed(adjustedBBox.y + adjustedBBox.height / 2);
+
+  // Calculate viewport center
+  const viewportCenterX = toFixed(viewport.width / 2);
+  const viewportCenterY = toFixed(viewport.height / 2);
+
+  // Calculate translation needed to center the element
+  const translateX = toFixed(viewportCenterX - elementCenterX);
+  const translateY = toFixed(viewportCenterY - elementCenterY);
+
+  const transformOrigin = `${elementCenterX}px ${elementCenterY}px`;
+
+  const rootGSelector = `svg#${sceneId} g#${rootGId}`;
+  const animatedElementSelector =
+    type === "bringToFront" ? `${rootGSelector} ${bringToFrontSelector}`
+    : addToRootSvg ? ":scope"
+    : rootGSelector;
+
+  /** Add root svg zoom in-out animation to the typed */
+  const animProp = getAnimationProperty({
+    animName: `scene-${sceneIndex}-type-zoom`,
+    elemSelector: animatedElementSelector,
+    totalDuration,
+    otherProps: `transform-origin: ${transformOrigin};`,
+  });
+  const style = fixIndent(`
+    @keyframes scene-${sceneIndex}-type-zoom {
+      ${getPercent(zoomInStartTime)}% { transform: translate(0px, 0px) scale(1);}
+      ${getPercent(zoomInEndTime)}% { transform: translate(${translateX}px, ${translateY}px) scale(${effectiveScale}); }
+      ${getPercent(zoomOutStartTime)}% { transform: translate(${translateX}px, ${translateY}px) scale(${effectiveScale}); }
+      ${getPercent(zoomOutEndTime)}% { transform: translate(0px, 0px) scale(1); }
+      ${toFixed(
+        Math.min(100, toPerc + 0.1),
+        4,
+      )}% { transform: translate(0px, 0px) scale(1); }
+    }
+    ${animProp}
+  `);
+  return { style };
+};

package/client/src/app/domToSVG/SVGif/compressSVGif.ts

@@ -0,0 +1,86 @@
+/**
+ * Given an SVG with multiple SVG scenes inside <g id="all-scenes">,
+ * identify which g elements have the same data-selector attribute and outerHTML across scenes and
+ * compress them by only keeping one instance and replacing the others with <use> elements referencing the first.
+ */
+
+import { isDefined } from "src/utils/utils";
+import { SVG_NAMESPACE } from "../domToSVG";
+import type { SVGifParsedScene } from "./getSVGifParsedScenes";
+
+export const compressSVGif = (
+  svg: SVGSVGElement,
+  parsedScenes: SVGifParsedScene[],
+) => {
+  const defs = document.createElementNS(SVG_NAMESPACE, "defs");
+  svg.appendChild(defs); // to ensure the SVG namespace is defined
+
+  const allSelectorNodes = Array.from(
+    svg.querySelectorAll<SVGGElement>(`[data-selector]`),
+  );
+  const nodesMap = new Map<string, SVGGElement>();
+  allSelectorNodes.forEach((n) => {
+    const { selector } = n.dataset;
+    if (selector && n.outerHTML.length > 150) {
+      nodesMap.set(selector, n);
+    }
+  });
+  const nodesToReuse = new Map<string, SVGGElement>();
+  const pushNodeToReuse = (selector: string, node: SVGGElement) => {
+    const id = `c-${selector.replaceAll(" ", "_").replaceAll(".", "_")}`;
+    if (!nodesToReuse.has(selector)) {
+      nodesToReuse.set(selector, node);
+      const clonedNode = node.cloneNode(true) as SVGGElement;
+      clonedNode.setAttribute("id", id);
+      clonedNode.removeAttribute("data-selector");
+      defs.appendChild(clonedNode);
+    }
+    const useElem = document.createElementNS(SVG_NAMESPACE, "use");
+    useElem.setAttribute("href", `#${id}`);
+    /** Transfer over test selectors */
+    Array.from(node.attributes).forEach((attr) => {
+      if (attr.name.startsWith("data-") && attr.name !== "data-selector") {
+        useElem.setAttribute(attr.name, attr.value);
+      }
+    });
+    node.replaceWith(useElem);
+  };
+  const scenes = Array.from(svg.querySelectorAll(`#all-scenes > svg`));
+
+  nodesMap.forEach((originalNode, selector) => {
+    const matchingScenes = scenes
+      .map((scene) => {
+        const [matchingNode, ...others] = scene.querySelectorAll<SVGGElement>(
+          `[data-selector=${JSON.stringify(selector)}]`,
+        );
+        /** Do not compress nodes that are selected in animations to ensure css selectors still work */
+        const parsedScene = parsedScenes.find((ps) => ps.svgDom === scene);
+        if (!parsedScene) {
+          throw "Could not find parsedScene";
+        }
+        if (
+          matchingNode &&
+          !others.length &&
+          matchingNode.outerHTML === originalNode.outerHTML &&
+          !parsedScene.animations.some((anim) => {
+            const node =
+              anim.type !== "wait" && anim.type !== "moveCursor" ?
+                matchingNode.querySelector(anim.elementSelector)
+              : null;
+            return node;
+          })
+        ) {
+          return { scene, matchingNode };
+        }
+      })
+      .filter(isDefined);
+
+    if (matchingScenes.length > 1) {
+      matchingScenes.forEach(({ matchingNode }) => {
+        pushNodeToReuse(selector, matchingNode);
+      });
+    }
+  });
+
+  return svg;
+};

package/client/src/app/domToSVG/SVGif/getSVGif.ts

@@ -0,0 +1,111 @@
+import { fixIndent } from "@common/utils";
+import type { SVGif } from "src/Testing";
+import { SVG_NAMESPACE } from "../domToSVG";
+import { addSVGifPointer } from "./addSVGifPointer";
+import { addSVGifTimelineControls } from "./addSVGifTimelineControls";
+import { getSVGifAnimations } from "./getSVGifAnimations";
+import { getSVGifParsedScenes } from "./getSVGifParsedScenes";
+import { compressSVGif } from "./compressSVGif";
+
+export const getSVGif = (
+  scenes: SVGif.Scene[],
+  svgFiles: Map<string, string>,
+) => {
+  const { parsedScenes, firstScene } = getSVGifParsedScenes(scenes, svgFiles);
+  const { viewBox, width, height } = firstScene;
+  const svg = document.createElementNS(SVG_NAMESPACE, "svg");
+  svg.setAttribute("xmlns", SVG_NAMESPACE);
+  svg.setAttribute("viewBox", viewBox);
+  const style = document.createElementNS(SVG_NAMESPACE, "style");
+  svg.appendChild(style);
+  const appendStyle = (s: string) => {
+    style.textContent += "\n\n" + fixIndent(s);
+  };
+  const g = document.createElementNS(SVG_NAMESPACE, "g");
+  g.setAttribute("id", "all-scenes");
+  svg.appendChild(g);
+
+  const { cursorKeyframes, sceneAnimations, totalDuration } =
+    getSVGifAnimations({ width, height }, g, parsedScenes, appendStyle);
+
+  const getThisAnimationProperty = (
+    args: Omit<
+      Parameters<typeof getAnimationProperty>[0],
+      "totalDuration" | "loop"
+    >,
+    onlyValue?: boolean,
+  ) => getAnimationProperty({ ...args, totalDuration }, onlyValue);
+
+  sceneAnimations.forEach(({ sceneId, keyframes }) => {
+    const animationName = `scene-${sceneId}-anim`;
+    appendStyle(`
+      @keyframes ${animationName} {
+      ${keyframes.map((v) => `  ${v}`).join("\n")}
+      }
+      ${getThisAnimationProperty({ elemSelector: `#${sceneId}`, animName: animationName })}
+    `);
+  });
+
+  addSVGifTimelineControls({
+    width,
+    height,
+    appendStyle,
+    g,
+    totalDuration,
+    sceneAnimations,
+  });
+  addSVGifPointer({
+    cursorKeyframes,
+    g,
+    appendStyle,
+    totalDuration,
+    isDarkTheme: scenes.some((s) => s.svgFileName.includes(".dark")),
+  });
+
+  compressSVGif(svg, parsedScenes);
+
+  svg
+    .querySelectorAll("[data-selector]")
+    .forEach((el) => el.removeAttribute("data-selector"));
+  // document.body.appendChild(svg); // debugging
+
+  /** Remove defs with empty styles */
+  svg.querySelectorAll("defs").forEach((defs) => {
+    if (!defs.innerHTML || !defs.innerHTML.trim()) {
+      defs.remove();
+    }
+  });
+  svg.setAttribute("data-duration", totalDuration);
+  const xmlSerializer = new XMLSerializer();
+  const svgString = xmlSerializer.serializeToString(svg);
+  return svgString;
+};
+
+export const getAnimationProperty = (
+  {
+    elemSelector,
+    animName,
+    totalDuration,
+    otherProps = "",
+    easeFunction = "ease-in-out",
+  }: {
+    elemSelector: string;
+    animName: string;
+    totalDuration: number;
+    otherProps?: string;
+    easeFunction?: "ease-in-out" | "ease-out";
+  },
+  onlyValue = false,
+) => {
+  const loop = true as boolean;
+  const value = `animation: ${animName} ${totalDuration}ms ${easeFunction} ${
+    loop ? "infinite" : "forwards"
+  };`;
+  if (onlyValue) return value;
+  return fixIndent(`
+      ${elemSelector} {
+        ${value}
+        ${otherProps}
+      }
+    `);
+};

package/client/src/app/domToSVG/SVGif/getSVGifAnimations.ts

@@ -0,0 +1,318 @@
+import { fixIndent } from "@common/utils";
+import { SVG_NAMESPACE } from "../domToSVG";
+import { renderSvg } from "../text/textToSVG";
+import { toFixed } from "../utils/toFixed";
+import { addSVGifCaption } from "./addSVGifCaption";
+import { getSVGifCursorAnimationHandler } from "./animations/getSVGifCursorAnimationHandler";
+import { getSVGifPropertiesAnimation } from "./animations/getSVGifPropertiesAnimation";
+import { getSVGifTypeAnimation } from "./animations/getSVGifTypeAnimation";
+import { getSVGifZoomToAnimation } from "./animations/getSVGifZoomToAnimation";
+import { getAnimationProperty } from "./getSVGif";
+import type { SVGifParsedScene } from "./getSVGifParsedScenes";
+import { getSVGifRevealKeyframes } from "./getSVGifRevealKeyframes";
+import { getSVGifTargetBBox } from "./getSVGifTargetBBox";
+import { getSVGifCustomAnimation } from "./animations/getSVGifCustomAnimation";
+
+/**
+ * Given an SVGifScenes, return the animations
+ */
+export const getSVGifAnimations = (
+  { height, width }: { width: number; height: number },
+  g: SVGGElement,
+  parsedScenes: SVGifParsedScene[],
+  appendRootStyle: (s: string) => void,
+) => {
+  const totalSvgifDuration = parsedScenes.reduce(
+    (acc, { animations }) =>
+      acc + animations.reduce((a, { duration }) => a + duration, 0),
+    0,
+  );
+
+  const getPercent = (ms: number, offset: 0 | 0.1 | -0.1 = 0) => {
+    const perc = (ms / totalSvgifDuration) * 100;
+    const result = Math.max(0, Math.min(100, perc));
+    const resultWithOffset = result + offset;
+
+    return toFixed(resultWithOffset, 4);
+  };
+  const cursorHandler = getSVGifCursorAnimationHandler({
+    getPercent,
+    parsedScenes,
+    totalSvgifDuration,
+    width,
+    height,
+  });
+
+  const sceneAnimations: {
+    sceneId: string;
+    svgName: string;
+    startMs: number;
+    duration: number;
+    keyframes: string[];
+  }[] = [];
+  let currentPrevDuration = 0;
+  const prevSceneAnim = sceneAnimations.at(-1);
+
+  for (const [sceneIndex, parsedScene] of parsedScenes.entries()) {
+    const { svgFileName, animations, svgDom, caption } = parsedScene;
+    if (!animations.length) {
+      throw new Error(
+        `No animations provided for scene ${sceneIndex} (${svgFileName}). Each scene must have at least one animation.`,
+      );
+    }
+    const sceneId = `scene-${sceneIndex}`;
+    const sceneStartMs = currentPrevDuration;
+    const sceneFromPercent = getPercent(currentPrevDuration);
+
+    const renderedSceneSVG = renderSvg(svgDom);
+
+    const sceneKeyframes: string[] = [];
+    if (prevSceneAnim) {
+      if (prevSceneAnim.svgName === svgFileName) {
+        throw new Error("SVG file must change between scenes");
+      }
+    }
+    if (currentPrevDuration) {
+      sceneKeyframes.push(`0% ${hidden}`);
+      sceneKeyframes.push(
+        `${getPercent(currentPrevDuration, -0.1)}% ${hidden}`,
+      );
+    }
+
+    sceneKeyframes.push(`${getPercent(currentPrevDuration)}% ${visible}`);
+
+    const sceneNodeAnimations: SceneNodeAnimation[] = [];
+    let sceneNodeAnimationsStyle = "";
+    const getDefs = () => {
+      let defs = svgDom.querySelector("defs");
+      if (!defs) {
+        defs = document.createElementNS(SVG_NAMESPACE, "defs");
+        svgDom.insertBefore(defs, svgDom.firstChild);
+      }
+      return defs;
+    };
+    let styleElem = svgDom.querySelector<SVGStyleElement>("style");
+    const appendStyle = (style: string) => {
+      if (!styleElem) {
+        styleElem = document.createElementNS(SVG_NAMESPACE, "style");
+        const defs = getDefs();
+        defs.appendChild(styleElem);
+      }
+      console.log("Appending style:", style);
+      styleElem.textContent += style;
+    };
+    for (const [animationIndex, animation] of animations.entries()) {
+      const bboxInfo =
+        animation.type !== "moveCursor" && animation.type !== "wait" ?
+          getSVGifTargetBBox({
+            elementSelector: animation.elementSelector,
+            nth: "nth" in animation ? animation.nth : undefined,
+            svgDom,
+            svgFileName,
+            width,
+            height,
+          })
+        : undefined;
+
+      if (animation.type === "wait") {
+        // do nothing, just advance the timeline
+      } else if (
+        animation.type === "click" ||
+        animation.type === "clickAppearOnHover" ||
+        animation.type === "moveCursor"
+      ) {
+        cursorHandler.addAnimation({
+          currentPrevDuration,
+          animation,
+          animationIndex,
+          animations,
+          bbox: bboxInfo?.bbox,
+          sceneIndex,
+          svgFileName,
+          sceneNodeAnimations,
+          sceneId,
+        });
+      } else {
+        const { duration, elementSelector } = animation;
+        if (!bboxInfo) throw new Error("Missing bboxInfo");
+        const { bbox, element } = bboxInfo;
+        const fromTime = currentPrevDuration;
+        const fromPerc = getPercent(fromTime);
+        if (animation.type === "fadeIn" || animation.type === "growIn") {
+          const toTime = fromTime + duration;
+          const toPerc = getPercent(toTime);
+          sceneNodeAnimations.push({
+            sceneId,
+            elemSelector: elementSelector,
+            keyframes: getSVGifRevealKeyframes({
+              fromPerc,
+              toPerc,
+              mode:
+                animation.type === "fadeIn" ?
+                  "opacity"
+                : { type: "growIn", startScale: animation.startScale },
+              // mode: "top to bottom",
+            }),
+          });
+        } else if (animation.type === "type") {
+          const parsedAnimations = getSVGifTypeAnimation(
+            { height, width },
+            { element, bbox },
+            parsedScene,
+            animation,
+            {
+              sceneId,
+              sceneIndex,
+              totalDuration: totalSvgifDuration,
+              getPercent,
+              fromTime,
+            },
+          );
+          sceneNodeAnimations.push(...parsedAnimations.sceneNodeAnimations);
+          appendStyle(parsedAnimations.style);
+        } else if (animation.type === "zoomToElement") {
+          const parsedAnimations = getSVGifZoomToAnimation(
+            { height, width },
+            { bbox },
+            parsedScene,
+            animation,
+            {
+              sceneId,
+              sceneIndex,
+              totalDuration: totalSvgifDuration,
+              getPercent,
+              fromTime,
+            },
+            true,
+          );
+          appendRootStyle(parsedAnimations.style);
+        } else if (animation.type === "properties") {
+          const parsedAnimations = getSVGifPropertiesAnimation(
+            { height, width },
+            { element, bbox },
+            parsedScene,
+            animation,
+            {
+              sceneId,
+              sceneIndex,
+              totalDuration: totalSvgifDuration,
+              getPercent,
+              fromTime,
+            },
+          );
+          sceneNodeAnimations.push(...parsedAnimations.sceneNodeAnimations);
+          // appendStyle(parsedAnimations.style);
+        } else if (animation.type === "custom") {
+          const parsedAnimations = getSVGifCustomAnimation(
+            parsedScene,
+            animation,
+            {
+              sceneId,
+              sceneIndex,
+              totalDuration: totalSvgifDuration,
+              getPercent,
+              fromTime,
+            },
+          );
+          sceneNodeAnimations.push(...parsedAnimations.sceneNodeAnimations);
+          // appendStyle(parsedAnimations.style);
+        }
+      }
+      const isParallelAnimation = animation.type === "zoomToElement";
+      currentPrevDuration += isParallelAnimation ? 0 : animation.duration;
+    }
+
+    if (sceneNodeAnimations.length) {
+      sceneNodeAnimationsStyle += "\n";
+      let nodeAnimIndex = 0;
+      sceneNodeAnimations.forEach(
+        ({ sceneId, elemSelector, keyframes, fixedAttributeValues }) => {
+          nodeAnimIndex++;
+          const animationName = `node-${sceneId}-anim-${nodeAnimIndex}`;
+          const fixedAttrsStr =
+            fixedAttributeValues ?
+              Object.entries(fixedAttributeValues)
+                .map(([k, v]) => `${k}: ${v};`)
+                .join(" ")
+            : "";
+          sceneNodeAnimationsStyle += "\n";
+          if (fixedAttrsStr) {
+            sceneNodeAnimationsStyle += `#${sceneId} ${elemSelector} { ${fixedAttrsStr} }\n`;
+          }
+          sceneNodeAnimationsStyle += fixIndent(`
+          @keyframes ${animationName} {
+          ${keyframes.map((v) => `  ${v}`).join("\n")}
+          }
+          ${getAnimationProperty({ elemSelector: `#${sceneId} ${elemSelector}`, animName: animationName, totalDuration: totalSvgifDuration })}
+        `);
+        },
+      );
+
+      appendStyle(sceneNodeAnimationsStyle);
+    }
+
+    if (caption) {
+      addSVGifCaption({
+        svgDom,
+        appendStyle,
+        width,
+        height,
+        caption,
+        fromPerc: sceneFromPercent,
+        toPerc: getPercent(currentPrevDuration),
+        totalDuration: totalSvgifDuration,
+        sceneId,
+      });
+    }
+    appendSvgToSvg({ id: sceneId, svgDom }, g);
+
+    const isLastScene = sceneIndex === parsedScenes.length - 1;
+    sceneKeyframes.push(`${getPercent(currentPrevDuration)}% ${visible}`);
+    if (!isLastScene) {
+      const toPerc = getPercent(currentPrevDuration, 0.1);
+      sceneKeyframes.push(`${getPercent(currentPrevDuration, 0.1)}% ${hidden}`);
+      if (toPerc < 100) {
+        sceneKeyframes.push(`100% ${hidden}`);
+      }
+    }
+
+    sceneAnimations.push({
+      sceneId,
+      startMs: sceneStartMs,
+      duration: currentPrevDuration - sceneStartMs,
+      svgName: svgFileName,
+      keyframes: sceneKeyframes,
+    });
+    renderedSceneSVG.remove();
+  }
+  const { cursorKeyframes } = cursorHandler.getCursorKeyframes();
+  return {
+    cursorKeyframes,
+    sceneAnimations,
+    totalDuration: totalSvgifDuration,
+  };
+};
+
+export type SceneNodeAnimation = {
+  sceneId: string;
+  elemSelector: string;
+  keyframes: string[];
+  fixedAttributeValues?: Record<string, string>;
+};
+
+const appendSvgToSvg = (
+  { id, svgDom }: { id: string; svgDom: SVGElement },
+  g: SVGGElement,
+) => {
+  svgDom.setAttribute("id", id);
+  g.appendChild(svgDom);
+
+  return {
+    remove: () => {
+      svgDom.remove();
+    },
+  };
+};
+
+const visible = "{  visibility: visible; }";
+const hidden = "{  visibility: hidden; }";

package/client/src/app/domToSVG/SVGif/getSVGifKeyframes.ts

@@ -0,0 +1,42 @@
+import { toFixed } from "../utils/toFixed";
+
+type Frame = {
+  percentage: number;
+  attributes: Partial<
+    Record<
+      | "x"
+      | "y"
+      | "width"
+      | "height"
+      | "transform"
+      | "transform-origin"
+      | "opacity"
+      | "clip-path",
+      string | number
+    >
+  >;
+};
+
+export const getSVGifKeyframes = (
+  from: Frame,
+  to: Frame,
+  addOpacity = true,
+) => {
+  const fromPerc = from.percentage;
+  const toPerc = to.percentage;
+  const fromAttrs = Object.entries(from.attributes)
+    .map(([k, v]) => `${k}: ${v};`)
+    .join(" ");
+  const toAttrs = Object.entries(to.attributes)
+    .map(([k, v]) => `${k}: ${v};`)
+    .join(" ");
+  return [
+    !fromPerc ? "" : `0% { ${addOpacity ? "opacity: 0;" : ""} ${fromAttrs} }`,
+    `${toFixed(fromPerc, 4)}%         { ${addOpacity ? "opacity: 0;" : ""} ${fromAttrs} }`,
+    `${toFixed(fromPerc + 0.1, 4)}%   { ${addOpacity ? "opacity: 1;" : ""} ${fromAttrs} }`,
+    `${toFixed(toPerc, 4)}%           { ${addOpacity ? "opacity: 1;" : ""} ${toAttrs}  }`,
+    toPerc === 100 ? "" : (
+      `100%       { ${addOpacity ? "opacity: 1;" : ""} ${toAttrs} }`
+    ),
+  ].filter(Boolean);
+};