Enhanced animations API.

examples/with-nextjs/src/excalidrawWrapper.tsx

@@ -1,4 +1,5 @@
 "use client";
+
 import * as excalidrawLib from "@excalidraw/excalidraw";
 import { Excalidraw } from "@excalidraw/excalidraw";
 
@@ -13,6 +14,7 @@ const ExcalidrawWrapper: React.FC = () => {
         appTitle={"Excalidraw with Nextjs Example"}
         useCustom={(api: any, args?: any[]) => {}}
         excalidrawLib={excalidrawLib}
+        showFadeDemo={true}
       >
         <Excalidraw />
       </App>

examples/with-script-in-browser/components/ExampleApp.tsx

@@ -70,6 +70,7 @@ export interface AppProps {
   customArgs?: any[];
   children: React.ReactNode;
   excalidrawLib: typeof TExcalidraw;
+  showFadeDemo?: boolean;
 }
 
 export default function ExampleApp({
@@ -78,6 +79,7 @@ export default function ExampleApp({
   customArgs,
   children,
   excalidrawLib,
+  showFadeDemo = false,
 }: AppProps) {
   const {
     exportToCanvas,
@@ -116,6 +118,19 @@ export default function ExampleApp({
     {},
   );
   const [comment, setComment] = useState<Comment | null>(null);
+  const [hideAllForFadeDemo, setHideAllForFadeDemo] = useState(false);
+  const [fadeDemoNextIndex, setFadeDemoNextIndex] = useState(0);
+  const [fadeDemoElementIds, setFadeDemoElementIds] = useState<string[]>([]);
+  const [demoAnimationType, setDemoAnimationType] = useState<"fade" | "fly">(
+    "fade",
+  );
+  const [demoAnimationDuration, setDemoAnimationDuration] = useState(500);
+  const [demoFlyFrom, setDemoFlyFrom] = useState<
+    "left" | "right" | "top" | "bottom"
+  >("left");
+  const [demoAnimationEasing, setDemoAnimationEasing] = useState<
+    "linear" | "easeOut" | "easeInOut"
+  >("easeOut");
 
   const initialStatePromiseRef = useRef<{
     promise: ResolvablePromise<ExcalidrawInitialDataState | null>;
@@ -178,7 +193,8 @@ export default function ExampleApp({
     const newElement = cloneElement(
       Excalidraw,
       {
-        excalidrawAPI: (api: ExcalidrawImperativeAPI) => setExcalidrawAPI(api),
+        onExcalidrawAPI: (api: ExcalidrawImperativeAPI | null) =>
+          setExcalidrawAPI(api),
         initialData: initialStatePromiseRef.current.promise,
         onChange: (
           elements: NonDeletedExcalidrawElement[],
@@ -208,6 +224,10 @@ export default function ExampleApp({
         onPointerDown,
         onScrollChange: rerenderCommentIcons,
         validateEmbeddable: true,
+        resolveRenderOpacity: hideAllForFadeDemo
+          ? (element: NonDeletedExcalidrawElement) =>
+              fadeDemoElementIds.includes(element.id) ? 0 : undefined
+          : undefined,
       },
       <>
         {excalidrawAPI && (
@@ -664,6 +684,229 @@ export default function ExampleApp({
           >
             Reset Scene
           </button>
+          {showFadeDemo && (
+            <>
+              <label>
+                Animation type
+                <select
+                  value={demoAnimationType}
+                  onChange={(event) =>
+                    setDemoAnimationType(
+                      event.target.value as "fade" | "fly",
+                    )
+                  }
+                >
+                  <option value="fade">fade</option>
+                  <option value="fly">fly</option>
+                </select>
+              </label>
+              <label>
+                Duration
+                <input
+                  type="number"
+                  value={demoAnimationDuration}
+                  onChange={(event) =>
+                    setDemoAnimationDuration(Number(event.target.value) || 0)
+                  }
+                />
+              </label>
+              <label>
+                Easing
+                <select
+                  value={demoAnimationEasing}
+                  onChange={(event) =>
+                    setDemoAnimationEasing(
+                      event.target.value as "linear" | "easeOut" | "easeInOut",
+                    )
+                  }
+                >
+                  <option value="linear">linear</option>
+                  <option value="easeOut">easeOut</option>
+                  <option value="easeInOut">easeInOut</option>
+                </select>
+              </label>
+              {demoAnimationType === "fly" && (
+                <label>
+                  Fly from
+                  <select
+                    value={demoFlyFrom}
+                    onChange={(event) =>
+                      setDemoFlyFrom(
+                        event.target.value as
+                          | "left"
+                          | "right"
+                          | "top"
+                          | "bottom",
+                      )
+                    }
+                  >
+                    <option value="left">left</option>
+                    <option value="right">right</option>
+                    <option value="top">top</option>
+                    <option value="bottom">bottom</option>
+                  </select>
+                </label>
+              )}
+              <button
+                onClick={() => {
+                  if (!excalidrawAPI) {
+                    return;
+                  }
+
+                  setFadeDemoElementIds(
+                    excalidrawAPI
+                      .getSceneElements()
+                      .map((element) => element.id),
+                  );
+                  excalidrawAPI.clearElementAnimationOverrides();
+                  setHideAllForFadeDemo(true);
+                  setFadeDemoNextIndex(0);
+                }}
+              >
+                Hide every element
+              </button>
+              <button
+                onClick={() => {
+                  if (!excalidrawAPI || !hideAllForFadeDemo) {
+                    return;
+                  }
+
+                  const elements = excalidrawAPI
+                    .getSceneElements()
+                    .filter((element) =>
+                      fadeDemoElementIds.includes(element.id),
+                    );
+
+                  if (!elements.length) {
+                    return;
+                  }
+
+                  const nextIndex =
+                    fadeDemoNextIndex >= elements.length
+                      ? 0
+                      : fadeDemoNextIndex;
+
+                  if (nextIndex === 0) {
+                    excalidrawAPI.clearElementAnimationOverrides();
+                  }
+
+                  if (demoAnimationType === "fly") {
+                    excalidrawAPI.animateElements({
+                      elements: [elements[nextIndex].id],
+                      type: "fly",
+                      from: demoFlyFrom,
+                      duration: demoAnimationDuration,
+                      phase: "in",
+                      easing: demoAnimationEasing,
+                    });
+                  } else {
+                    excalidrawAPI.animateElements({
+                      elements: [elements[nextIndex].id],
+                      type: "fade",
+                      duration: demoAnimationDuration,
+                      phase: "in",
+                      easing: demoAnimationEasing,
+                    });
+                  }
+
+                  setFadeDemoNextIndex(nextIndex + 1);
+                }}
+              >
+                Animate in next element
+              </button>
+              <button
+                onClick={() => {
+                  if (!excalidrawAPI || !hideAllForFadeDemo) {
+                    return;
+                  }
+
+                  const elements = excalidrawAPI
+                    .getSceneElements()
+                    .filter((element) =>
+                      fadeDemoElementIds.includes(element.id),
+                    );
+
+                  if (!elements.length) {
+                    return;
+                  }
+
+                  if (demoAnimationType === "fly") {
+                    excalidrawAPI.animateElements({
+                      elements,
+                      type: "fly",
+                      from: demoFlyFrom,
+                      duration: demoAnimationDuration,
+                      stagger: 120,
+                      phase: "in",
+                      easing: demoAnimationEasing,
+                    });
+                  } else {
+                    excalidrawAPI.animateElements({
+                      elements,
+                      type: "fade",
+                      duration: demoAnimationDuration,
+                      stagger: 120,
+                      phase: "in",
+                      easing: demoAnimationEasing,
+                    });
+                  }
+
+                  setFadeDemoNextIndex(elements.length);
+                }}
+              >
+                Animate in all
+              </button>
+              <button
+                onClick={() => {
+                  if (!excalidrawAPI || !hideAllForFadeDemo) {
+                    return;
+                  }
+
+                  const elements = excalidrawAPI
+                    .getSceneElements()
+                    .filter((element) =>
+                      fadeDemoElementIds.includes(element.id),
+                    );
+
+                  if (!elements.length) {
+                    return;
+                  }
+
+                  const prevIndex = Math.min(
+                    fadeDemoNextIndex - 1,
+                    elements.length - 1,
+                  );
+
+                  if (prevIndex < 0) {
+                    return;
+                  }
+
+                  if (demoAnimationType === "fly") {
+                    excalidrawAPI.animateElements({
+                      elements: [elements[prevIndex].id],
+                      type: "fly",
+                      from: demoFlyFrom,
+                      duration: demoAnimationDuration,
+                      phase: "out",
+                      easing: demoAnimationEasing,
+                    });
+                  } else {
+                    excalidrawAPI.animateElements({
+                      elements: [elements[prevIndex].id],
+                      type: "fade",
+                      duration: demoAnimationDuration,
+                      phase: "out",
+                      easing: demoAnimationEasing,
+                    });
+                  }
+
+                  setFadeDemoNextIndex(prevIndex);
+                }}
+              >
+                Animate out prev element
+              </button>
+            </>
+          )}
           <button
             onClick={() => {
               const libraryItems: LibraryItems = [

examples/with-script-in-browser/initialData.tsx

@@ -2,6 +2,28 @@ import type { ExcalidrawElementSkeleton } from "@excalidraw/excalidraw/element/t
 import type { FileId } from "@excalidraw/excalidraw/element/types";
 
 const elements: ExcalidrawElementSkeleton[] = [
+  // {
+  //   type: "arrow",
+  //   x: 100,
+  //   y: 500,
+  // },
+  // {
+  //   type: "arrow",
+  //   x: 250,
+  //   y: 250,
+  //   label: {
+  //     text: "HELLO WORLD!!",
+  //   },
+  //   start: {
+  //     type: "rectangle",
+  //     // x: -100,
+  //   },
+  //   end: {
+  //     type: "ellipse",
+  //     // x: 300,
+  //   },
+  // },
+
   {
     type: "rectangle",
     x: 10,
@@ -22,14 +44,14 @@ const elements: ExcalidrawElementSkeleton[] = [
     },
     id: "2",
   },
-  {
+  // {
-    type: "arrow",
+  //   type: "arrow",
-    x: 100,
+  //   x: 100,
-    y: 200,
+  //   y: 200,
-    label: { text: "HELLO WORLD!!" },
+  //   label: { text: "HELLO WORLD!!" },
-    start: { type: "rectangle" },
+  //   start: { type: "rectangle" },
-    end: { type: "ellipse" },
+  //   end: { type: "ellipse" },
-  },
+  // },
   {
     type: "image",
     x: 606.1042326312408,
@@ -38,11 +60,11 @@ const elements: ExcalidrawElementSkeleton[] = [
     height: 230,
     fileId: "rocket" as FileId,
   },
-  {
+  // {
-    type: "frame",
+  //   type: "frame",
-    children: ["1", "2"],
+  //   children: ["1", "2"],
-    name: "My frame",
+  //   name: "My frame",
-  },
+  // },
 ];
 export default {
   elements,

packages/common/src/points.ts

@@ -1,5 +1,4 @@
 import {
-  pointFrom,
   pointFromPair,
   type GlobalPoint,
   type LocalPoint,
@@ -70,12 +69,12 @@ export const getGridPoint = (
   x: number,
   y: number,
   gridSize: NullableGridSize,
-): GlobalPoint => {
+): [number, number] => {
   if (gridSize) {
-    return pointFrom<GlobalPoint>(
+    return [
       Math.round(x / gridSize) * gridSize,
       Math.round(y / gridSize) * gridSize,
-    );
+    ];
   }
-  return pointFrom<GlobalPoint>(x, y);
+  return [x, y];
 };

packages/element/src/binding.ts

@@ -1,7 +1,6 @@
 import {
   arrayToMap,
   getFeatureFlag,
-  getGridPoint,
   invariant,
   isTransparent,
 } from "@excalidraw/common";
@@ -23,7 +22,7 @@ import {
 } from "@excalidraw/math";
 
 import type { LineSegment, LocalPoint, Radians } from "@excalidraw/math";
-import type { AppState, NullableGridSize } from "@excalidraw/excalidraw/types";
+import type { AppState } from "@excalidraw/excalidraw/types";
 import type { MapEntry, Mutable } from "@excalidraw/common/utility-types";
 import type { Bounds } from "@excalidraw/common";
 
@@ -155,7 +154,6 @@ export const bindOrUnbindBindingElement = (
     altKey?: boolean;
     angleLocked?: boolean;
     initialBinding?: boolean;
-    gridSize?: NullableGridSize;
   },
 ) => {
   const { start, end } = getBindingStrategyForDraggingBindingElementEndpoints(
@@ -172,16 +170,12 @@ export const bindOrUnbindBindingElement = (
     },
   );
 
-  const isMidpointSnappingEnabled =
-    appState.isMidpointSnappingEnabled && !appState.gridModeEnabled;
-
   bindOrUnbindBindingElementEdge(
     arrow,
     start,
     "start",
     scene,
     appState.isBindingEnabled,
-    isMidpointSnappingEnabled,
   );
   bindOrUnbindBindingElementEdge(
     arrow,
@@ -189,7 +183,6 @@ export const bindOrUnbindBindingElement = (
     "end",
     scene,
     appState.isBindingEnabled,
-    isMidpointSnappingEnabled,
   );
   if (start.focusPoint || end.focusPoint) {
     // If the strategy dictates a focus point override, then
@@ -234,7 +227,6 @@ const bindOrUnbindBindingElementEdge = (
   startOrEnd: "start" | "end",
   scene: Scene,
   shouldSnapToOutline = true,
-  isMidpointSnappingEnabled = true,
 ): void => {
   if (mode === null) {
     // null means break the binding
@@ -248,7 +240,6 @@ const bindOrUnbindBindingElementEdge = (
       scene,
       focusPoint,
       shouldSnapToOutline,
-      isMidpointSnappingEnabled,
     );
   }
 };
@@ -602,7 +593,6 @@ export const getBindingStrategyForDraggingBindingElementEndpoints = (
     finalize?: boolean;
     initialBinding?: boolean;
     zoom?: AppState["zoom"];
-    gridSize?: NullableGridSize;
   },
 ): { start: BindingStrategy; end: BindingStrategy } => {
   if (getFeatureFlag("COMPLEX_BINDINGS")) {
@@ -643,7 +633,6 @@ const getBindingStrategyForDraggingBindingElementEndpoints_simple = (
     finalize?: boolean;
     initialBinding?: boolean;
     zoom?: AppState["zoom"];
-    gridSize?: NullableGridSize;
   },
 ): { start: BindingStrategy; end: BindingStrategy } => {
   const startIdx = 0;
@@ -706,9 +695,7 @@ const getBindingStrategyForDraggingBindingElementEndpoints_simple = (
     elementsMap,
   );
   const hit = getHoveredElementForBinding(
-    opts?.angleLocked || appState.gridModeEnabled
+    globalPoint,
-      ? pointFrom<GlobalPoint>(scenePointerX, scenePointerY)
-      : globalPoint,
     elements,
     elementsMap,
     maxBindingDistance_simple(appState.zoom),
@@ -760,11 +747,7 @@ const getBindingStrategyForDraggingBindingElementEndpoints_simple = (
           ? globalPoint
           : // NOTE: Can only affect the start point because new arrows always drag the end point
           opts?.newArrow
-          ? getGridPoint(
+          ? appState.selectedLinearElement!.initialState.origin!
-              appState.selectedLinearElement!.initialState.origin![0],
-              appState.selectedLinearElement!.initialState.origin![1],
-              opts.gridSize as NullableGridSize,
-            )
           : LinearElementEditor.getPointAtIndexGlobalCoordinates(
               arrow,
               0,
@@ -823,27 +806,12 @@ const getBindingStrategyForDraggingBindingElementEndpoints_simple = (
           focusPoint:
             projectFixedPointOntoDiagonal(
               arrow,
-              opts?.angleLocked || appState.gridModeEnabled
+              globalPoint,
-                ? snapBoundPointToGrid(
-                    pointFrom<GlobalPoint>(scenePointerX, scenePointerY),
-                    hit,
-                    elementsMap,
-                    appState.gridSize as NullableGridSize,
-                    arrow,
-                    LinearElementEditor.getPointAtIndexGlobalCoordinates(
-                      arrow,
-                      startDragged ? 1 : -2,
-                      elementsMap,
-                    ),
-                  )
-                : globalPoint,
               hit,
               startDragged ? "start" : "end",
               elementsMap,
               appState.zoom,
-              appState.isMidpointSnappingEnabled &&
+              appState.isMidpointSnappingEnabled,
-                !opts?.angleLocked &&
-                !appState.gridModeEnabled,
             ) || globalPoint,
         }
     : { mode: null };
@@ -888,7 +856,7 @@ const getBindingStrategyForDraggingBindingElementEndpoints_simple = (
               startDragged ? "end" : "start",
               elementsMap,
               appState.zoom,
-              false,
+              appState.isMidpointSnappingEnabled,
             ) || otherEndpoint,
         }
       : { mode: undefined }
@@ -1053,7 +1021,6 @@ export const bindBindingElement = (
   scene: Scene,
   focusPoint?: GlobalPoint,
   shouldSnapToOutline = true,
-  isMidpointSnappingEnabled = true,
 ): void => {
   const elementsMap = scene.getNonDeletedElementsMap();
 
@@ -1069,7 +1036,6 @@ export const bindBindingElement = (
         startOrEnd,
         elementsMap,
         shouldSnapToOutline,
-        isMidpointSnappingEnabled,
       ),
     };
   } else {
@@ -1774,92 +1740,6 @@ const extractBinding = (
   };
 };
 
-/**
- * Snaps a bound arrow endpoint to the grid on the axis parallel to the
- * bindable element's side, while preserving the binding gap distance on the
- * perpendicular axis. In other words, the grid axis closest to the side's
- * perpendicular (normal) is used as the snap axis and the other axis is kept at
- * the binding gap distance.
- */
-const snapBoundPointToGrid = (
-  outlinePoint: GlobalPoint,
-  bindableElement: ExcalidrawBindableElement,
-  elementsMap: ElementsMap,
-  gridSize: NullableGridSize,
-  arrowElement: ExcalidrawArrowElement,
-  adjacentPoint?: GlobalPoint,
-): GlobalPoint => {
-  if (!gridSize) {
-    return outlinePoint;
-  }
-
-  const aabb = aabbForElement(bindableElement, elementsMap);
-  // For ellipses and diamonds use the arrow's incoming direction instead of
-  // the position-based heading, which can give the wrong axis when the
-  // outline point is near a cardinal zone or an angled diamond face.
-  const heading =
-    adjacentPoint &&
-    (bindableElement.type === "ellipse" || bindableElement.type === "diamond")
-      ? vectorToHeading(vectorFromPoint(adjacentPoint, outlinePoint))
-      : headingForPointFromElement(bindableElement, aabb, outlinePoint);
-
-  const normalLocal = pointFrom<GlobalPoint>(heading[0], heading[1]);
-  const normalGlobal = pointRotateRads(
-    normalLocal,
-    pointFrom<GlobalPoint>(0, 0),
-    bindableElement.angle,
-  );
-
-  const bindingGap = getBindingGap(bindableElement, arrowElement);
-  const extent =
-    Math.max(bindableElement.width, bindableElement.height) + bindingGap * 2;
-  const center = getCenterForBounds(aabb);
-
-  const absNX = Math.abs(normalGlobal[0]);
-  const absNY = Math.abs(normalGlobal[1]);
-  if (absNX >= absNY) {
-    // Global X is closest to the perpendicular so snap Y, intersect horizontal line
-    const [, snappedY] = getGridPoint(
-      outlinePoint[0],
-      outlinePoint[1],
-      gridSize,
-    );
-    const intersector = lineSegment<GlobalPoint>(
-      pointFrom<GlobalPoint>(center[0] - extent, snappedY),
-      pointFrom<GlobalPoint>(center[0] + extent, snappedY),
-    );
-    const intersection = intersectElementWithLineSegment(
-      bindableElement,
-      elementsMap,
-      intersector,
-      bindingGap,
-    ).sort(
-      (a, b) =>
-        pointDistanceSq(a, outlinePoint) - pointDistanceSq(b, outlinePoint),
-    )[0];
-
-    return intersection ?? pointFrom<GlobalPoint>(outlinePoint[0], snappedY);
-  }
-
-  // Global Y is closest to the perpendicular so snap X, intersect vertical line
-  const [snappedX] = getGridPoint(outlinePoint[0], outlinePoint[1], gridSize);
-  const intersector = lineSegment<GlobalPoint>(
-    pointFrom<GlobalPoint>(snappedX, center[1] - extent),
-    pointFrom<GlobalPoint>(snappedX, center[1] + extent),
-  );
-  const intersection = intersectElementWithLineSegment(
-    bindableElement,
-    elementsMap,
-    intersector,
-    bindingGap,
-  ).sort(
-    (a, b) =>
-      pointDistanceSq(a, outlinePoint) - pointDistanceSq(b, outlinePoint),
-  )[0];
-
-  return intersection ?? pointFrom<GlobalPoint>(snappedX, outlinePoint[1]);
-};
-
 const elementArea = (element: ExcalidrawBindableElement) =>
   element.width * element.height;
 

packages/element/src/linearElementEditor.ts

@@ -359,7 +359,6 @@ export class LinearElementEditor {
       linearElementEditor,
     );
 
-    const angleLocked = shouldRotateWithDiscreteAngle(event);
     LinearElementEditor.movePoints(
       element,
       app.scene,
@@ -371,10 +370,7 @@ export class LinearElementEditor {
       },
       {
         isBindingEnabled: app.state.isBindingEnabled,
-        isMidpointSnappingEnabled:
+        isMidpointSnappingEnabled: app.state.isMidpointSnappingEnabled,
-          app.state.isMidpointSnappingEnabled &&
-          !angleLocked &&
-          !app.state.gridModeEnabled,
       },
     );
     // Set the suggested binding from the updates if available
@@ -431,9 +427,7 @@ export class LinearElementEditor {
                 "start",
                 elementsMap,
                 app.state.zoom,
-                app.state.isMidpointSnappingEnabled &&
+                app.state.isMidpointSnappingEnabled,
-                  !angleLocked &&
-                  !app.state.gridModeEnabled,
               )
             : linearElementEditor.initialState.altFocusPoint,
       },
@@ -560,8 +554,6 @@ export class LinearElementEditor {
       linearElementEditor,
     );
 
-    const angleLocked =
-      shouldRotateWithDiscreteAngle(event) && singlePointDragged;
     LinearElementEditor.movePoints(
       element,
       app.scene,
@@ -573,10 +565,7 @@ export class LinearElementEditor {
       },
       {
         isBindingEnabled: app.state.isBindingEnabled,
-        isMidpointSnappingEnabled:
+        isMidpointSnappingEnabled: app.state.isMidpointSnappingEnabled,
-          app.state.isMidpointSnappingEnabled &&
-          !angleLocked &&
-          !app.state.gridModeEnabled,
       },
     );
 
@@ -672,9 +661,7 @@ export class LinearElementEditor {
                 "start",
                 elementsMap,
                 app.state.zoom,
-                app.state.isMidpointSnappingEnabled &&
+                app.state.isMidpointSnappingEnabled,
-                  !angleLocked &&
-                  !app.state.gridModeEnabled,
               )
             : linearElementEditor.initialState.altFocusPoint,
       },
@@ -2189,7 +2176,6 @@ const pointDraggingUpdates = (
       newArrow: !!app.state.newElement,
       angleLocked,
       altKey,
-      gridSize: app.getEffectiveGridSize(),
     },
   );
 

packages/element/src/renderElement.ts

@@ -1,6 +1,7 @@
 import rough from "roughjs/bin/rough";
 
 import {
+  clamp,
   type GlobalPoint,
   isRightAngleRads,
   lineSegment,
@@ -105,8 +106,62 @@ const getCanvasPadding = (element: ExcalidrawElement) => {
   }
 };
 
+export const resolveRenderOpacity = (
+  element: ExcalidrawElement,
+  renderConfig: Pick<
+    StaticCanvasRenderConfig,
+    "elementOpacityOverrides" | "resolveRenderOpacity"
+  >,
+) => {
+  const override = renderConfig.elementOpacityOverrides?.get(element.id);
+
+  if (override !== undefined) {
+    return clamp(override, 0, 100);
+  }
+
+  const resolvedOpacity = renderConfig.resolveRenderOpacity?.(
+    element as NonDeletedExcalidrawElement,
+  );
+
+  if (resolvedOpacity !== undefined) {
+    return clamp(resolvedOpacity, 0, 100);
+  }
+
+  return element.opacity;
+};
+
+export const resolveRenderPositionOffset = (
+  element: ExcalidrawElement,
+  renderConfig: Pick<StaticCanvasRenderConfig, "elementPositionOverrides">,
+) => {
+  return renderConfig.elementPositionOverrides?.get(element.id) ?? { x: 0, y: 0 };
+};
+
+export const getRenderElementWithPositionOverride = <
+  TElement extends NonDeletedExcalidrawElement,
+>(
+  element: TElement,
+  renderConfig: Pick<StaticCanvasRenderConfig, "elementPositionOverrides">,
+): TElement => {
+  const positionOffset = resolveRenderPositionOffset(element, renderConfig);
+
+  if (positionOffset.x === 0 && positionOffset.y === 0) {
+    return element;
+  }
+
+  return {
+    ...element,
+    x: element.x + positionOffset.x,
+    y: element.y + positionOffset.y,
+  } as TElement;
+};
+
 export const getRenderOpacity = (
   element: ExcalidrawElement,
+  renderConfig: Pick<
+    StaticCanvasRenderConfig,
+    "elementOpacityOverrides" | "resolveRenderOpacity"
+  >,
   containingFrame: ExcalidrawFrameLikeElement | null,
   elementsPendingErasure: ElementsPendingErasure,
   pendingNodes: Readonly<PendingExcalidrawElements> | null,
@@ -115,7 +170,8 @@ export const getRenderOpacity = (
   // multiplying frame opacity with element opacity to combine them
   // (e.g. frame 50% and element 50% opacity should result in 25% opacity)
   let opacity =
-    (((containingFrame?.opacity ?? 100) * element.opacity) / 10000) *
+    (((containingFrame?.opacity ?? 100) * resolveRenderOpacity(element, renderConfig)) /
+      10000) *
     globalAlpha;
 
   // if pending erasure, multiply again to combine further
@@ -791,8 +847,11 @@ export const renderElement = (
     !appState.selectedElementIds[element.id] &&
     !appState.hoveredElementIds[element.id];
 
+  element = getRenderElementWithPositionOverride(element, renderConfig);
+
   context.globalAlpha = getRenderOpacity(
     element,
+    renderConfig,
     getContainingFrame(element, elementsMap),
     renderConfig.elementsPendingErasure,
     renderConfig.pendingFlowchartNodes,

packages/excalidraw/actions/actionFinalize.tsx

@@ -27,7 +27,7 @@ import { isInvisiblySmallElement } from "@excalidraw/element";
 
 import { CaptureUpdateAction } from "@excalidraw/element";
 
-import type { LocalPoint } from "@excalidraw/math";
+import type { GlobalPoint, LocalPoint } from "@excalidraw/math";
 import type {
   ExcalidrawElement,
   ExcalidrawLinearElement,
@@ -93,40 +93,32 @@ export const actionFinalize = register<FormData>({
             ? [element.points.length - 1] // New arrow creation
             : appState.selectedLinearElement.selectedPointsIndices;
 
-        const angleLocked = shouldRotateWithDiscreteAngle(event);
-        const effectiveGridSize = event[KEYS.CTRL_OR_CMD]
-          ? null
-          : app.getEffectiveGridSize();
-
         const draggedPoints: PointsPositionUpdates =
           selectedPointsIndices.reduce((map, index) => {
             map.set(index, {
-              point: angleLocked
+              point: LinearElementEditor.pointFromAbsoluteCoords(
-                ? element.points[index]
+                element,
-                : LinearElementEditor.createPointAt(
+                pointFrom<GlobalPoint>(
-                    element,
+                  sceneCoords.x - linearElementEditor.pointerOffset.x,
-                    elementsMap,
+                  sceneCoords.y - linearElementEditor.pointerOffset.y,
-                    sceneCoords.x - linearElementEditor.pointerOffset.x,
+                ),
-                    sceneCoords.y - linearElementEditor.pointerOffset.y,
+                elementsMap,
-                    effectiveGridSize,
+              ),
-                  ),
             });
 
             return map;
           }, new Map()) ?? new Map();
-
         bindOrUnbindBindingElement(
           element,
           draggedPoints,
-          sceneCoords.x,
+          sceneCoords.x - linearElementEditor.pointerOffset.x,
-          sceneCoords.y,
+          sceneCoords.y - linearElementEditor.pointerOffset.y,
           scene,
           appState,
           {
             newArrow,
             altKey: event.altKey,
-            angleLocked,
+            angleLocked: shouldRotateWithDiscreteAngle(event),
-            gridSize: app.getEffectiveGridSize(),
           },
         );
       } else if (isLineElement(element)) {

packages/excalidraw/components/App.tsx

@@ -207,10 +207,12 @@ import {
   getLineHeightInPx,
   getApproxMinLineWidth,
   getApproxMinLineHeight,
-  getMinTextElementWidth,
+   getMinTextElementWidth,
-  ShapeCache,
+   ShapeCache,
-  getRenderOpacity,
+   getRenderOpacity,
-  editGroupForSelectedElement,
+   resolveRenderPositionOffset,
+   resolveRenderOpacity,
+   editGroupForSelectedElement,
   getElementsInGroup,
   getSelectedGroupIdForElement,
   getSelectedGroupIds,
@@ -450,6 +452,7 @@ import { searchItemInFocusAtom } from "./SearchMenu";
 import { isSidebarDockedAtom } from "./Sidebar/Sidebar";
 import { StaticCanvas, InteractiveCanvas } from "./canvases";
 import NewElementCanvas from "./canvases/NewElementCanvas";
+import { AnimationController } from "../renderer/animation";
 import { isPointHittingLink } from "./hyperlink/helpers";
 import { MagicIcon, copyIcon, fullscreenIcon } from "./icons";
 import { AppStateObserver, type OnStateChange } from "./AppStateObserver";
@@ -740,6 +743,235 @@ class App extends React.Component<AppProps, AppState> {
   onRemoveEventListenersEmitter = new Emitter<[]>();
 
   api: ExcalidrawImperativeAPI;
+  private renderAnimationVersion = 0;
+  private elementOpacityOverrides = new Map<string, number>();
+  private elementPositionOverrides = new Map<string, { x: number; y: number }>();
+  private elementAnimationStates = new Map<
+    string,
+    {
+      opacityFrom: number;
+      opacityTo: number;
+      positionFrom: { x: number; y: number };
+      positionTo: { x: number; y: number };
+      easing: "linear" | "easeOut" | "easeInOut";
+      duration: number;
+      delay: number;
+      elapsed: number;
+    }
+  >();
+
+  private getElementAnimationKey = () => `${this.id}:animate-element`;
+
+  private bumpRenderAnimationVersion = () => {
+    this.renderAnimationVersion++;
+    this.setState({});
+  };
+
+  private getRenderOpacityConfig = () => ({
+    elementOpacityOverrides: this.elementOpacityOverrides,
+    elementPositionOverrides: this.elementPositionOverrides,
+    resolveRenderOpacity: this.props.resolveRenderOpacity,
+  });
+
+  private getResolvedElementOpacity = (element: NonDeletedExcalidrawElement) => {
+    return resolveRenderOpacity(element, this.getRenderOpacityConfig());
+  };
+
+  private getElementVisibleOpacity = (element: NonDeletedExcalidrawElement) => {
+    return clamp(element.opacity, 0, 100);
+  };
+
+  private applyAnimationEasing = (
+    progress: number,
+    easing: "linear" | "easeOut" | "easeInOut",
+  ) => {
+    switch (easing) {
+      case "linear":
+        return progress;
+      case "easeOut":
+        return easeOut(progress);
+      case "easeInOut":
+        return progress < 0.5
+          ? 4 * progress * progress * progress
+          : 1 - Math.pow(-2 * progress + 2, 3) / 2;
+    }
+  };
+
+  private getFlyPositionOffset = (
+    element: NonDeletedExcalidrawElement,
+    from: "left" | "right" | "top" | "bottom",
+  ) => {
+    const [x1, y1, x2, y2] = getElementAbsoluteCoords(
+      element,
+      this.scene.getNonDeletedElementsMap(),
+    );
+    const viewportWidth = this.state.width / this.state.zoom.value;
+    const viewportHeight = this.state.height / this.state.zoom.value;
+    const elementWidth = x2 - x1;
+    const elementHeight = y2 - y1;
+
+    switch (from) {
+      case "left":
+        return { x: -(Math.max(viewportWidth, elementWidth) + 64), y: 0 };
+      case "right":
+        return { x: Math.max(viewportWidth, elementWidth) + 64, y: 0 };
+      case "top":
+        return { x: 0, y: -(Math.max(viewportHeight, elementHeight) + 64) };
+      case "bottom":
+        return { x: 0, y: Math.max(viewportHeight, elementHeight) + 64 };
+    }
+  };
+
+  private animateElement = ({
+    id,
+    opacityFrom,
+    opacityTo,
+    positionFrom = { x: 0, y: 0 },
+    positionTo = { x: 0, y: 0 },
+    easing,
+    duration,
+    delay,
+  }: {
+    id: string;
+    opacityFrom: number;
+    opacityTo: number;
+    positionFrom?: { x: number; y: number };
+    positionTo?: { x: number; y: number };
+    easing: "linear" | "easeOut" | "easeInOut";
+    duration: number;
+    delay: number;
+  }) => {
+    const normalizedOpacityFrom = clamp(opacityFrom, 0, 100);
+    const normalizedOpacityTo = clamp(opacityTo, 0, 100);
+    const normalizedDuration = Math.max(duration, 0);
+    const normalizedDelay = Math.max(delay, 0);
+
+    this.elementOpacityOverrides.set(id, normalizedOpacityFrom);
+
+    if (positionFrom.x !== 0 || positionFrom.y !== 0) {
+      this.elementPositionOverrides.set(id, positionFrom);
+    } else {
+      this.elementPositionOverrides.delete(id);
+    }
+
+    if (normalizedDuration === 0 && normalizedDelay === 0) {
+      this.elementAnimationStates.delete(id);
+      this.elementOpacityOverrides.set(id, normalizedOpacityTo);
+
+      if (positionTo.x !== 0 || positionTo.y !== 0) {
+        this.elementPositionOverrides.set(id, positionTo);
+      } else {
+        this.elementPositionOverrides.delete(id);
+      }
+
+      this.bumpRenderAnimationVersion();
+      return;
+    }
+
+    this.elementAnimationStates.set(id, {
+      opacityFrom: normalizedOpacityFrom,
+      opacityTo: normalizedOpacityTo,
+      positionFrom,
+      positionTo,
+      easing,
+      duration: normalizedDuration,
+      delay: normalizedDelay,
+      elapsed: 0,
+    });
+
+    this.bumpRenderAnimationVersion();
+    this.syncElementAnimations();
+  };
+
+  private syncElementAnimations = () => {
+    const animationKey = this.getElementAnimationKey();
+
+    if (this.elementAnimationStates.size === 0) {
+      AnimationController.cancel(animationKey);
+      return;
+    }
+
+    if (AnimationController.running(animationKey)) {
+      return;
+    }
+
+    AnimationController.start(animationKey, ({ deltaTime }) => {
+      let shouldRerender = false;
+
+      for (const [id, animation] of this.elementAnimationStates) {
+        const element = this.scene.getNonDeletedElement(id);
+
+        if (!element) {
+          this.elementAnimationStates.delete(id);
+          shouldRerender =
+            this.elementOpacityOverrides.delete(id) || shouldRerender;
+          shouldRerender =
+            this.elementPositionOverrides.delete(id) || shouldRerender;
+          continue;
+        }
+
+        animation.elapsed += deltaTime;
+
+        const progress =
+          animation.elapsed <= animation.delay
+            ? 0
+            : animation.duration === 0
+              ? 1
+              : Math.min(
+                  (animation.elapsed - animation.delay) / animation.duration,
+                  1,
+                );
+        const easedProgress = this.applyAnimationEasing(
+          progress,
+          animation.easing,
+        );
+
+        const nextOpacity =
+          animation.opacityFrom +
+          (animation.opacityTo - animation.opacityFrom) * easedProgress;
+        const nextPosition = {
+          x:
+            animation.positionFrom.x +
+            (animation.positionTo.x - animation.positionFrom.x) * easedProgress,
+          y:
+            animation.positionFrom.y +
+            (animation.positionTo.y - animation.positionFrom.y) * easedProgress,
+        };
+
+        const clampedOpacity = clamp(nextOpacity, 0, 100);
+
+        if (this.elementOpacityOverrides.get(id) !== clampedOpacity) {
+          this.elementOpacityOverrides.set(id, clampedOpacity);
+          shouldRerender = true;
+        }
+
+        const currentPositionOverride =
+          this.elementPositionOverrides.get(id) ?? ({ x: 0, y: 0 } as const);
+
+        if (
+          currentPositionOverride.x !== nextPosition.x ||
+          currentPositionOverride.y !== nextPosition.y
+        ) {
+          if (nextPosition.x === 0 && nextPosition.y === 0) {
+            this.elementPositionOverrides.delete(id);
+          } else {
+            this.elementPositionOverrides.set(id, nextPosition);
+          }
+          shouldRerender = true;
+        }
+
+        if (animation.elapsed >= animation.delay + animation.duration) {
+          this.elementAnimationStates.delete(id);
+        }
+      }
+
+      if (shouldRerender) {
+        this.bumpRenderAnimationVersion();
+      }
+
+      return this.elementAnimationStates.size > 0 ? {} : undefined;
+    });
+  };
 
   private createExcalidrawAPI(): ExcalidrawImperativeAPI {
     const api: ExcalidrawImperativeAPI = {
@@ -757,6 +989,9 @@ class App extends React.Component<AppProps, AppState> {
         clear: this.resetHistory,
       },
       scrollToContent: this.scrollToContent,
+      animateElements: this.animateElements,
+      cancelElementAnimation: this.cancelElementAnimation,
+      clearElementAnimationOverrides: this.clearElementAnimationOverrides,
       getSceneElements: this.getSceneElements,
       getAppState: () => this.state,
       getFiles: () => this.files,
@@ -1734,6 +1969,10 @@ class App extends React.Component<AppProps, AppState> {
           const isHovered =
             this.state.activeEmbeddable?.element === el &&
             this.state.activeEmbeddable?.state === "hover";
+          const renderPositionOffset = resolveRenderPositionOffset(
+            el,
+            this.getRenderOpacityConfig(),
+          );
 
           // scale video embeds based on zoom (capped) so that smaller embeds
           // on canvas when zoomed are still of legible quality
@@ -1755,13 +1994,14 @@ class App extends React.Component<AppProps, AppState> {
               })}
               style={{
                 transform: isVisible
-                  ? `translate(${x - this.state.offsetLeft}px, ${
+                  ? `translate(${x + renderPositionOffset.x * this.state.zoom.value - this.state.offsetLeft}px, ${
-                      y - this.state.offsetTop
+                      y + renderPositionOffset.y * this.state.zoom.value - this.state.offsetTop
                     }px) scale(${scale})`
                   : "none",
                 display: isVisible ? "block" : "none",
                 opacity: getRenderOpacity(
                   el,
+                  this.getRenderOpacityConfig(),
                   getContainingFrame(el, this.scene.getNonDeletedElementsMap()),
                   this.elementsPendingErasure,
                   null,
@@ -2351,6 +2591,9 @@ class App extends React.Component<AppProps, AppState> {
                               pendingFlowchartNodes:
                                 this.flowChartCreator.pendingNodes,
                               theme: this.state.theme,
+                              ...this.getRenderOpacityConfig(),
+                              renderAnimationVersion:
+                                this.renderAnimationVersion,
                             }}
                           />
                           {newElementCanvasElement && (
@@ -2373,6 +2616,9 @@ class App extends React.Component<AppProps, AppState> {
                                   this.elementsPendingErasure,
                                 pendingFlowchartNodes: null,
                                 theme: this.state.theme,
+                                ...this.getRenderOpacityConfig(),
+                                renderAnimationVersion:
+                                  this.renderAnimationVersion,
                               }}
                             />
                           )}
@@ -3206,6 +3452,7 @@ class App extends React.Component<AppProps, AppState> {
     this.editorLifecycleEvents.emit("editor:unmount");
     this.props.onUnmount?.();
     this.props.onExcalidrawAPI?.(null);
+    AnimationController.cancel(this.getElementAnimationKey());
 
     (window as any).launchQueue?.setConsumer(() => {});
 
@@ -4618,6 +4865,98 @@ class App extends React.Component<AppProps, AppState> {
     },
   );
 
+  public animateElements = ({
+    elements,
+    duration = 250,
+    delay = 0,
+    stagger = 0,
+    phase = "in",
+    easing,
+    ...animation
+  }:
+    | {
+        elements: readonly (ExcalidrawElement | ExcalidrawElement["id"])[];
+        type: "fade";
+        duration?: number;
+        delay?: number;
+        stagger?: number;
+        phase?: "in" | "out";
+        easing?: "linear" | "easeOut" | "easeInOut";
+      }
+    | {
+        elements: readonly (ExcalidrawElement | ExcalidrawElement["id"])[];
+        type: "fly";
+        from: "left" | "right" | "top" | "bottom";
+        duration?: number;
+        delay?: number;
+        stagger?: number;
+        phase?: "in" | "out";
+        easing?: "linear" | "easeOut" | "easeInOut";
+      }) => {
+    const normalizedDelay = Math.max(delay, 0);
+    const normalizedStagger = Math.max(stagger, 0);
+
+    elements.forEach((elementOrId, index) => {
+      const id = typeof elementOrId === "string" ? elementOrId : elementOrId.id;
+      const element = this.scene.getNonDeletedElement(id);
+
+      if (!element) {
+        return;
+      }
+
+      if (animation.type === "fade") {
+        this.animateElement({
+          id,
+          opacityFrom:
+            phase === "in" ? 0 : this.getElementVisibleOpacity(element),
+          opacityTo:
+            phase === "in" ? this.getElementVisibleOpacity(element) : 0,
+          easing: easing ?? "easeInOut",
+          duration,
+          delay: normalizedDelay + index * normalizedStagger,
+        });
+        return;
+      }
+
+      const flyOffset = this.getFlyPositionOffset(element, animation.from);
+
+      this.animateElement({
+        id,
+        opacityFrom: phase === "in" ? 0 : this.getElementVisibleOpacity(element),
+        opacityTo: phase === "in" ? this.getElementVisibleOpacity(element) : 0,
+        positionFrom: phase === "in" ? flyOffset : { x: 0, y: 0 },
+        positionTo: phase === "in" ? { x: 0, y: 0 } : flyOffset,
+        easing: easing ?? "easeOut",
+        duration,
+        delay: normalizedDelay + index * normalizedStagger,
+      });
+    });
+  };
+
+  public cancelElementAnimation = (id: string) => {
+    if (!this.elementAnimationStates.delete(id)) {
+      return;
+    }
+
+    this.syncElementAnimations();
+  };
+
+  public clearElementAnimationOverrides = () => {
+    if (
+      this.elementOpacityOverrides.size === 0 &&
+      this.elementPositionOverrides.size === 0 &&
+      this.elementAnimationStates.size === 0
+    ) {
+      return;
+    }
+
+    this.elementAnimationStates.clear();
+    this.elementOpacityOverrides.clear();
+    this.elementPositionOverrides.clear();
+    this.syncElementAnimations();
+    this.bumpRenderAnimationVersion();
+  };
+
   public applyDeltas = (
     deltas: StoreDelta[],
     options?: ApplyToOptions,
@@ -7263,16 +7602,14 @@ class App extends React.Component<AppProps, AppState> {
       return;
     }
 
-    // Set suggested binding if we're hovering with an arrow tool
+    if (this.state.activeTool.type === "arrow") {
-    // and not dragging out a new element
-    if (this.state.activeTool.type === "arrow" && !this.state.newElement) {
-      const scenePointer = pointFrom<GlobalPoint>(scenePointerX, scenePointerY);
       const hit = getHoveredElementForBinding(
-        scenePointer,
+        pointFrom<GlobalPoint>(scenePointerX, scenePointerY),
         this.scene.getNonDeletedElements(),
         this.scene.getNonDeletedElementsMap(),
         maxBindingDistance_simple(this.state.zoom),
       );
+      const scenePointer = pointFrom<GlobalPoint>(scenePointerX, scenePointerY);
       const elementsMap = this.scene.getNonDeletedElementsMap();
       if (hit && !isPointInElement(scenePointer, hit, elementsMap)) {
         this.setState({

packages/excalidraw/components/canvases/InteractiveCanvas.tsx

@@ -253,7 +253,6 @@ const getRelevantAppStateProps = (
   newElement: appState.newElement,
   isBindingEnabled: appState.isBindingEnabled,
   isMidpointSnappingEnabled: appState.isMidpointSnappingEnabled,
-  gridModeEnabled: appState.gridModeEnabled,
   suggestedBinding: appState.suggestedBinding,
   isRotating: appState.isRotating,
   elementsToHighlight: appState.elementsToHighlight,

packages/excalidraw/index.tsx

@@ -99,6 +99,7 @@ const ExcalidrawBase = (props: ExcalidrawProps) => {
     children,
     validateEmbeddable,
     renderEmbeddable,
+    resolveRenderOpacity,
     aiEnabled,
     showDeprecatedFonts,
     renderScrollbars,
@@ -217,6 +218,7 @@ const ExcalidrawBase = (props: ExcalidrawProps) => {
           onDuplicate={onDuplicate}
           validateEmbeddable={validateEmbeddable}
           renderEmbeddable={renderEmbeddable}
+          resolveRenderOpacity={resolveRenderOpacity}
           aiEnabled={aiEnabled !== false}
           showDeprecatedFonts={showDeprecatedFonts}
           renderScrollbars={renderScrollbars}

packages/excalidraw/renderer/interactiveScene.ts

@@ -17,7 +17,6 @@ import {
   FRAME_STYLE,
   getFeatureFlag,
   invariant,
-  shouldRotateWithDiscreteAngle,
   THEME,
 } from "@excalidraw/common";
 
@@ -230,7 +229,6 @@ const renderBindingHighlightForBindableElement_simple = (
   elementsMap: ElementsMap,
   appState: InteractiveCanvasAppState,
   pointerCoords: GlobalPoint | null,
-  angleLocked = false,
 ) => {
   const enclosingFrame =
     suggestedBinding.element.frameId &&
@@ -417,8 +415,6 @@ const renderBindingHighlightForBindableElement_simple = (
 
   if (
     appState.isMidpointSnappingEnabled &&
-    !appState.gridModeEnabled &&
-    !angleLocked &&
     (isFrameLikeElement(suggestedBinding.element) ||
       isBindableElement(suggestedBinding.element))
   ) {
@@ -811,12 +807,7 @@ const renderBindingHighlightForBindableElement_complex = (
 
     context.restore();
 
-    if (
+    if (appState.isMidpointSnappingEnabled) {
-      appState.isMidpointSnappingEnabled &&
-      !appState.gridModeEnabled &&
-      (!app.lastPointerMoveEvent ||
-        !shouldRotateWithDiscreteAngle(app.lastPointerMoveEvent))
-    ) {
       // Draw midpoint indicators
       context.save();
       context.translate(
@@ -929,16 +920,12 @@ const renderBindingHighlightForBindableElement = (
         app.lastPointerMoveCoords.y,
       )
     : null;
-  const angleLocked =
-    !!app.lastPointerMoveEvent &&
-    shouldRotateWithDiscreteAngle(app.lastPointerMoveEvent);
   renderBindingHighlightForBindableElement_simple(
     context,
     suggestedBinding,
     allElementsMap,
     appState,
     pointerCoords,
-    angleLocked,
   );
   context.restore();
 };

packages/excalidraw/renderer/staticScene.ts

@@ -14,11 +14,16 @@ import {
 } from "@excalidraw/element";
 import {
   elementOverlapsWithFrame,
+  getContainingFrame,
   getTargetFrame,
   shouldApplyFrameClip,
 } from "@excalidraw/element";
 
-import { renderElement } from "@excalidraw/element";
+import {
+  getRenderElementWithPositionOverride,
+  getRenderOpacity,
+  renderElement,
+} from "@excalidraw/element";
 
 import { getElementAbsoluteCoords } from "@excalidraw/element";
 
@@ -170,7 +175,10 @@ const renderLinkIcon = (
   context: CanvasRenderingContext2D,
   appState: StaticCanvasAppState,
   elementsMap: ElementsMap,
+  renderConfig: StaticCanvasRenderConfig,
 ) => {
+  element = getRenderElementWithPositionOverride(element, renderConfig);
+
   if (element.link && !appState.selectedElementIds[element.id]) {
     const [x1, y1, x2, y2] = getElementAbsoluteCoords(element, elementsMap);
     const [x, y, width, height] = getLinkHandleFromCoords(
@@ -221,7 +229,13 @@ const renderLinkIcon = (
 
       linkCanvasCacheContext.restore();
     }
-    context.globalAlpha = element.opacity / 100;
+    context.globalAlpha = getRenderOpacity(
+      element,
+      renderConfig,
+      getContainingFrame(element, elementsMap),
+      renderConfig.elementsPendingErasure,
+      renderConfig.pendingFlowchartNodes,
+    );
     context.drawImage(linkCanvas, x - centerX, y - centerY, width, height);
     context.restore();
   }
@@ -370,7 +384,7 @@ const _renderStaticScene = ({
         context.restore();
 
         if (!isExporting) {
-          renderLinkIcon(element, context, appState, elementsMap);
+          renderLinkIcon(element, context, appState, elementsMap, renderConfig);
         }
       } catch (error: any) {
         console.error(
@@ -421,7 +435,7 @@ const _renderStaticScene = ({
             );
           }
           if (!isExporting) {
-            renderLinkIcon(element, context, appState, elementsMap);
+            renderLinkIcon(element, context, appState, elementsMap, renderConfig);
           }
         };
         // - when exporting the whole canvas, we DO NOT apply clipping

packages/excalidraw/scene/types.ts

@@ -12,6 +12,7 @@ import type {
   AppClassProperties,
   AppState,
   EmbedsValidationStatus,
+  RenderOpacityResolver,
   ElementsPendingErasure,
   InteractiveCanvasAppState,
   StaticCanvasAppState,
@@ -37,6 +38,13 @@ export type StaticCanvasRenderConfig = {
   elementsPendingErasure: ElementsPendingErasure;
   pendingFlowchartNodes: PendingExcalidrawElements | null;
   theme: AppState["theme"];
+  resolveRenderOpacity?: RenderOpacityResolver;
+  elementOpacityOverrides?: ReadonlyMap<ExcalidrawElement["id"], number>;
+  elementPositionOverrides?: ReadonlyMap<
+    ExcalidrawElement["id"],
+    { x: number; y: number }
+  >;
+  renderAnimationVersion?: number;
 };
 
 export type SVGRenderConfig = {

packages/excalidraw/types.ts

@@ -224,7 +224,6 @@ export type InteractiveCanvasAppState = Readonly<
     newElement: AppState["newElement"];
     isBindingEnabled: AppState["isBindingEnabled"];
     isMidpointSnappingEnabled: AppState["isMidpointSnappingEnabled"];
-    gridModeEnabled: AppState["gridModeEnabled"];
     suggestedBinding: AppState["suggestedBinding"];
     isRotating: AppState["isRotating"];
     elementsToHighlight: AppState["elementsToHighlight"];
@@ -568,6 +567,10 @@ export type OnExportProgress = {
   progress?: number;
 };
 
+export type RenderOpacityResolver = (
+  element: NonDeletedExcalidrawElement,
+) => ExcalidrawElement["opacity"] | undefined;
+
 export interface ExcalidrawProps {
   onChange?: (
     elements: readonly OrderedExcalidrawElement[],
@@ -683,6 +686,7 @@ export interface ExcalidrawProps {
     element: NonDeleted<ExcalidrawEmbeddableElement>,
     appState: AppState,
   ) => JSX.Element | null;
+  resolveRenderOpacity?: RenderOpacityResolver;
   aiEnabled?: boolean;
   showDeprecatedFonts?: boolean;
   renderScrollbars?: boolean;
@@ -846,7 +850,6 @@ export type AppClassProperties = {
   onStateChange: App["onStateChange"];
 
   lastPointerMoveCoords: App["lastPointerMoveCoords"];
-  lastPointerMoveEvent: App["lastPointerMoveEvent"];
   bindModeHandler: App["bindModeHandler"];
 
   setAppState: App["setAppState"];
@@ -964,6 +967,11 @@ export interface ExcalidrawImperativeAPI {
   getFiles: () => InstanceType<typeof App>["files"];
   getName: InstanceType<typeof App>["getName"];
   scrollToContent: InstanceType<typeof App>["scrollToContent"];
+  animateElements: InstanceType<typeof App>["animateElements"];
+  cancelElementAnimation: InstanceType<typeof App>["cancelElementAnimation"];
+  clearElementAnimationOverrides: InstanceType<
+    typeof App
+  >["clearElementAnimationOverrides"];
   registerAction: (action: Action) => void;
   refresh: InstanceType<typeof App>["refresh"];
   setToast: InstanceType<typeof App>["setToast"];