animot-presenter 0.6.0 → 0.6.2

package/dist/AnimotPresenter.svelte

@@ -371,6 +371,14 @@
 				const animated = animatedElements.get(elementId);
 				if (animated) animated.opacity.to(0, { duration: 0 });
 			}
+			// On entrance completion, snap inline opacity to the element's
+			// declared opacity (replaces the keyframe's fill-mode hold).
+			if (kind === 'entrance') {
+				const animated = animatedElements.get(elementId);
+				const el = elementContent.get(elementId);
+				const targetOpacity = (el as any)?.opacity ?? 1;
+				if (animated) animated.opacity.to(targetOpacity, { duration: 0 });
+			}
 		}, delayMs + durationMs + 50);
 		runtimeAnimTimersPresenter.set(key, t);
 	}
@@ -885,8 +893,9 @@
 
 		if (hasSlideTransition) {
 			// Phase 2 sprint-1 polish — fire per-element exit presets BEFORE
-			// the slide-level CSS transition starts so they're visible alongside
-			// the cross-fade. Skip elements still on the target slide (morph case).
+			// the slide-level CSS transition starts, then WAIT for them to
+			// finish so the cross-fade doesn't swallow their visual.
+			let maxExitDur = 0;
 			for (const el of currentSlide.canvas.elements) {
 				const exitMode = el.animationConfig?.exit;
 				if (!exitMode || exitMode === 'none' || exitMode === 'fade') continue;
@@ -896,13 +905,16 @@
 				if (stillOnTarget) continue;
 				const dur = el.animationConfig?.exitDuration ?? el.animationConfig?.duration ?? 600;
 				presenterRegisterRuntimeAnim(el.id, 'exit', kf, dur);
-				// Snap opacity to 0 after the CSS exit keyframe finishes so the
-				// element vanishes cleanly once the runtime registry entry expires.
+				if (dur > maxExitDur) maxExitDur = dur;
 				const elId = el.id;
 				const animatedRef = animatedElements.get(elId);
 				if (animatedRef) setTimeout(() => animatedRef.opacity.to(0, { duration: 0 }), dur);
 			}
 
+			if (maxExitDur > 0) {
+				await new Promise(r => setTimeout(r, maxExitDur));
+			}
+
 			transitionClass = `transition-${transition.type}-out`;
 			await new Promise(r => setTimeout(r, duration * 0.4));
 			const newElementContent = new Map(elementContent);
@@ -1163,7 +1175,9 @@
 							if (!sequencedProps.has('perspective')) anims.push(animated.perspective.to(targetEl.perspective ?? 1000, { duration: elementDuration, easing }));
 							if (!sequencedProps.has('opacity')) {
 								const targetOpacity = (targetEl as any).opacity ?? 1;
-								if (animated.opacity.current !== targetOpacity) anims.push(animated.opacity.to(targetOpacity, { duration: elementDuration, easing }));
+								const entrPreset = (targetEl as any).animationConfig?.entrance;
+								const hasPresetEntrance = entrPreset && entrPreset !== 'fade' && entrPreset !== 'none';
+								if (!hasPresetEntrance && animated.opacity.current !== targetOpacity) anims.push(animated.opacity.to(targetOpacity, { duration: elementDuration, easing }));
 							}
 							const sortedSeqs = [...propertySequences].sort((a, b) => a.order - b.order);
 							let cumulativeDelay = 0;
@@ -1213,10 +1227,13 @@
 							anims.push(animated.contrast.to(targetEl.contrast ?? 100, { duration: elementDuration, easing }));
 							anims.push(animated.saturate.to(targetEl.saturate ?? 100, { duration: elementDuration, easing }));
 							anims.push(animated.grayscale.to(targetEl.grayscale ?? 0, { duration: elementDuration, easing }));
-							// Opacity interpolation for morphing elements
+							// Opacity. Skip when a preset entrance is configured so the
+							// CSS keyframe owns opacity for the entire entrance.
+							const entrPreset = (targetEl as any).animationConfig?.entrance;
+							const hasPresetEntrance = entrPreset && entrPreset !== 'fade' && entrPreset !== 'none';
 							const currOpacity = animated.opacity.current;
 							const targetOpacity = (targetEl as any).opacity ?? 1;
-							if (currOpacity !== targetOpacity) {
+							if (!hasPresetEntrance && currOpacity !== targetOpacity) {
 								anims.push(animated.opacity.to(targetOpacity, { duration: elementDuration, easing }));
 							}
 						}
@@ -1283,7 +1300,7 @@
 							const targetOpacity = (targetEl as any).opacity ?? 1;
 							const presetKf = entranceRuntimeKeyframe(entrance);
 							if (presetKf && entrance !== 'fade' && entrance !== 'none') {
-								anims.push(animated.opacity.to(targetOpacity, { duration: 0 }));
+								// Let CSS keyframe own opacity for entire entrance (no inline snap).
 								presenterRegisterRuntimeAnim(targetEl.id, 'entrance', presetKf, targetEl.animationConfig?.entranceDuration ?? elementDuration, order * 100 + delay);
 							} else if (entrance === 'fade') {
 								anims.push(animated.opacity.to(targetOpacity, { duration: elementDuration / 2, easing }));
@@ -1694,7 +1711,8 @@
 						? mpPoint.angle + (mpConfig.orientationOffset ?? 0)
 						: null}
 					{@const parallax = isCinemaMode && element?.depth ? parallaxOffset(currentCamera, element.depth, worldWidth, worldHeight) : { x: 0, y: 0 }}
-					{#if element && animated && animated.opacity.current > 0.01 && element.visible !== false && !(element.type === 'motionPath' && !(element as MotionPathElement).showInPresentation)}
+					{@const _entranceActive = (() => { void runtimeBump; const hasReg = typeof window !== 'undefined' && !!((window as any).__animotPresenterRuntime as Map<string, { entrance?: string }> | undefined)?.get(elementId)?.entrance; return hasReg && !!getElementInSlide(currentSlide, elementId); })()}
+					{#if element && animated && (animated.opacity.current > 0.01 || _entranceActive) && element.visible !== false && !(element.type === 'motionPath' && !(element as MotionPathElement).showInPresentation)}
 						<div
 							class="animot-element"
 							class:floating={hasFloat}