Improve fly-in animation: start from cursor position, faster timing, fix flicker

Author: Milan

src/lib/animation/flyInAnimation.ts

@@ -16,7 +16,7 @@
 // ============================================================================
 
 const CONFIG = {
-	duration: 500,           // Animation duration (ms) - matches assembly animation
+	duration: 300,           // Animation duration (ms)
 	flyDistanceMargin: 100,  // Extra margin beyond viewport edge (px in flow coords)
 	domReadyDelay: 50        // Wait for DOM to render after node creation (ms)
 };
@@ -38,48 +38,85 @@ export interface ViewportInfo {
 // ============================================================================
 
 /**
- * Animate a single node flying in from the left edge of the viewport
+ * Animate a single node flying in from the cursor position
  *
  * @param nodeId - The ID of the node to animate
  * @param targetPosition - The node's final position in flow coordinates
  * @param getViewport - Function to get current viewport info
+ * @param cursorScreen - Cursor position in screen coordinates (optional)
+ * @param screenToFlow - Function to convert screen to flow coordinates (optional)
  */
 export function runFlyInAnimation(
 	nodeId: string,
 	targetPosition: { x: number; y: number },
-	getViewport: () => ViewportInfo
+	getViewport: () => ViewportInfo,
+	cursorScreen?: { x: number; y: number } | null,
+	screenToFlow?: (pos: { x: number; y: number }) => { x: number; y: number }
 ): void {
-	// Wait for DOM element to exist
-	setTimeout(() => {
-		const nodeEl = document.querySelector(`[data-id="${nodeId}"]`) as HTMLElement;
-		if (!nodeEl) return;
+	let flyFromX: number;
+	let flyFromY: number;
 
+	if (cursorScreen && screenToFlow) {
+		// Convert cursor screen position to flow coordinates
+		const cursorFlow = screenToFlow(cursorScreen);
+		// Calculate offset from target position (fly-from is relative to final position)
+		flyFromX = cursorFlow.x - targetPosition.x;
+		flyFromY = cursorFlow.y - targetPosition.y;
+	} else {
+		// Fallback: fly from left edge of viewport
 		const viewport = getViewport();
-
-		// Calculate left edge of viewport in flow coordinates
 		const leftEdgeX = -viewport.x / viewport.zoom;
+		flyFromX = leftEdgeX - CONFIG.flyDistanceMargin - targetPosition.x;
+		flyFromY = 0;
+	}
+
+	// Poll for DOM element (typically appears within 1-2 frames)
+	let attempts = 0;
+	const maxAttempts = 20;
+
+	function tryAnimate() {
+		const nodeEl = document.querySelector(`[data-id="${nodeId}"]`) as HTMLElement;
 
-		// Fly from left edge (with margin) to target position
-		// The fly-from value is relative to the node's final position
-		const flyFromX = leftEdgeX - CONFIG.flyDistanceMargin - targetPosition.x;
-		const flyFromY = 0; // Keep vertical position (fly horizontally)
+		if (!nodeEl) {
+			attempts++;
+			if (attempts < maxAttempts) {
+				requestAnimationFrame(tryAnimate);
+			}
+			return;
+		}
+
+		// Immediately set initial position to prevent flicker
+		// This positions the node at the start of the animation before CSS takes over
+		nodeEl.style.translate = `${flyFromX}px ${flyFromY}px`;
+		nodeEl.style.scale = '0.8';
+		nodeEl.style.opacity = '0';
 
 		// Set CSS variables for the animation
 		nodeEl.style.setProperty('--fly-from-x', `${flyFromX}px`);
 		nodeEl.style.setProperty('--fly-from-y', `${flyFromY}px`);
 		nodeEl.style.setProperty('--assembly-duration', `${CONFIG.duration}ms`);
 		nodeEl.style.setProperty('--assembly-delay', '0ms');
 
-		// Add the assembling class to trigger the CSS animation
-		nodeEl.classList.add('assembling');
-
-		// Cleanup after animation completes
-		setTimeout(() => {
-			nodeEl.classList.remove('assembling');
-			nodeEl.style.removeProperty('--fly-from-x');
-			nodeEl.style.removeProperty('--fly-from-y');
-			nodeEl.style.removeProperty('--assembly-duration');
-			nodeEl.style.removeProperty('--assembly-delay');
-		}, CONFIG.duration + 50);
-	}, CONFIG.domReadyDelay);
+		// Start animation in next frame (after initial styles are applied)
+		requestAnimationFrame(() => {
+			// Remove inline styles and let animation take over
+			nodeEl.style.removeProperty('translate');
+			nodeEl.style.removeProperty('scale');
+			nodeEl.style.removeProperty('opacity');
+
+			// Add the assembling class to trigger the CSS animation
+			nodeEl.classList.add('assembling');
+
+			// Cleanup after animation completes
+			setTimeout(() => {
+				nodeEl.classList.remove('assembling');
+				nodeEl.style.removeProperty('--fly-from-x');
+				nodeEl.style.removeProperty('--fly-from-y');
+				nodeEl.style.removeProperty('--assembly-duration');
+				nodeEl.style.removeProperty('--assembly-delay');
+			}, CONFIG.duration + 50);
+		});
+	}
+
+	requestAnimationFrame(tryAnimate);
 }

src/lib/components/FlowUpdater.svelte

@@ -316,7 +316,9 @@
 						width: canvas?.clientWidth ?? window.innerWidth,
 						height: canvas?.clientHeight ?? window.innerHeight
 					};
-				}
+				},
+				value.cursorScreen,
+				screenToFlowPosition
 			);
 		}
 	});

src/lib/stores/viewTriggers.ts

@@ -94,12 +94,27 @@ export function triggerEditAnnotation(annotationId: string): void {
 }
 
 // Fly-in animation trigger - triggers fly-in animation for a newly placed node
-export const flyInAnimationTrigger = writable<{ nodeId: string; position: { x: number; y: number }; id: number }>({
+export const flyInAnimationTrigger = writable<{
+	nodeId: string;
+	position: { x: number; y: number };
+	cursorScreen: { x: number; y: number } | null;
+	id: number
+}>({
 	nodeId: '',
 	position: { x: 0, y: 0 },
+	cursorScreen: null,
 	id: 0
 });
 
-export function triggerFlyInAnimation(nodeId: string, position: { x: number; y: number }): void {
-	flyInAnimationTrigger.update((current) => ({ nodeId, position, id: current.id + 1 }));
+export function triggerFlyInAnimation(
+	nodeId: string,
+	position: { x: number; y: number },
+	cursorScreen?: { x: number; y: number }
+): void {
+	flyInAnimationTrigger.update((current) => ({
+		nodeId,
+		position,
+		cursorScreen: cursorScreen ?? null,
+		id: current.id + 1
+	}));
 }

src/routes/+page.svelte

@@ -935,9 +935,9 @@
 		// Subsystem creation auto-creates Interface block inside
 		const newNode = historyStore.mutate(() => graphStore.addNode(type, position));
 
-		// Trigger fly-in animation for the new node
+		// Trigger fly-in animation for the new node (from cursor position)
 		if (newNode) {
-			triggerFlyInAnimation(newNode.id, position);
+			triggerFlyInAnimation(newNode.id, position, mousePosition);
 		}
 	}
 </script>