Release/new

.github/workflows/ci.yml

@@ -33,7 +33,7 @@ jobs:
 
     steps:
       - name: Checkout
-        uses: actions/checkout@v5
+        uses: actions/checkout@v6
         with:
           persist-credentials: false
 
@@ -75,7 +75,7 @@ jobs:
 
     steps:
       - name: Checkout
-        uses: actions/checkout@v5
+        uses: actions/checkout@v6
         with:
           persist-credentials: false
 

.github/workflows/pr-title.yml

@@ -29,7 +29,7 @@ jobs:
       pull-requests: read
     steps:
       - name: Validate pull request title
-        uses: amannn/action-semantic-pull-request@v6.1.0
+        uses: amannn/action-semantic-pull-request@v6.1.1
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
         with:

.github/workflows/release.yml

@@ -26,7 +26,7 @@ jobs:
 
     steps:
       - name: Checkout
-        uses: actions/checkout@v5
+        uses: actions/checkout@v6
         with:
           fetch-depth: 0
 

src/components/NavigationStackProvider.tsx

@@ -582,13 +582,10 @@ export function NavigationStackProvider(
       initialParams: isControlled ? undefined : props.initialParams,
     }),
   );
+  const timeoutRef = useRef<number | null>(null);
   const state = isControlled ? props.state : internalState;
   const stateRef = useRef<NavigationStackState>(state);
-  const timeoutRef = useRef<number | null>(null);
-
-  useEffect(() => {
-    stateRef.current = state;
-  }, [state]);
+  stateRef.current = state;
 
   useEffect(() => {
     return () => {

src/components/NavigationStackScene.tsx

@@ -33,6 +33,18 @@ export interface NavigationStackSceneProps {
   animationEasing?: string;
   /** Stagger-based delay in milliseconds (`spec.stagger × sceneIndex`). */
   animationDelay?: number;
+  /**
+   * Inline `transform` fallback matching the animation's `from` keyframe.
+   * Applied only on entering scenes so the element starts at the correct off-screen
+   * position during the brief window before `@keyframes` registers in the cascade.
+   * The running animation always overrides this via the animation value layer.
+   */
+  animationFromTransform?: string;
+  /**
+   * Inline `opacity` fallback matching the animation's `from` keyframe.
+   * Same purpose as `animationFromTransform`.
+   */
+  animationFromOpacity?: number;
   /** When true, applies `overflow: hidden` to clip scene content during the transition. */
   clipContent?: boolean;
   children?: ReactNode;
@@ -69,6 +81,8 @@ export function NavigationStackScene(
     pointerEvents: props.isActive ? 'auto' : 'none',
     visibility: props.isActive || props.transitionState ? 'visible' : 'hidden',
     overflow: props.clipContent ? 'hidden' : undefined,
+    transform: props.animationFromTransform,
+    opacity: props.animationFromOpacity,
     animation: props.animationName
       ? `${props.animationName} ${duration}ms ${easing} ${delay}ms both`
       : undefined,

src/components/NavigationStackViewport.tsx

@@ -334,6 +334,8 @@ export function NavigationStackViewport(
           delay: number;
           easing: string;
           clip: boolean;
+          fromTransform: string | undefined;
+          fromOpacity: number | undefined;
         }
       >(),
     };
@@ -348,7 +350,14 @@ export function NavigationStackViewport(
     const cssBlocks: string[] = [];
     const animations = new Map<
       string,
-      { name: string | undefined; delay: number; easing: string; clip: boolean }
+      {
+        name: string | undefined;
+        delay: number;
+        easing: string;
+        clip: boolean;
+        fromTransform: string | undefined;
+        fromOpacity: number | undefined;
+      }
     >();
 
     renderableEntries.forEach((entry) => {
@@ -386,13 +395,19 @@ export function NavigationStackViewport(
           delay: keyframeResult.delay,
           easing,
           clip: !!spec.clip,
+          fromTransform:
+            phase === 'enter' ? keyframeResult.fromTransform : undefined,
+          fromOpacity:
+            phase === 'enter' ? keyframeResult.fromOpacity : undefined,
         });
       } else {
         animations.set(entry.key, {
           name: undefined,
           delay: 0,
           easing,
           clip: !!spec.clip,
+          fromTransform: undefined,
+          fromOpacity: undefined,
         });
       }
     });
@@ -435,7 +450,7 @@ export function NavigationStackViewport(
           ...props.style,
         }}
       >
-        <style>{dynamicCss || undefined}</style>
+        <style>{dynamicCss || ''}</style>
         {props.renderEmpty?.() ?? null}
       </div>
     );
@@ -455,7 +470,7 @@ export function NavigationStackViewport(
           ...props.style,
         }}
       >
-        {dynamicCss ? <style>{dynamicCss}</style> : null}
+        <style>{dynamicCss || ''}</style>
 
         {renderableEntries.map((entry) => {
           const route = routes[entry.routeName];
@@ -509,6 +524,8 @@ export function NavigationStackViewport(
               animationName={anim?.name}
               animationEasing={anim?.easing}
               animationDelay={anim?.delay}
+              animationFromTransform={anim?.fromTransform}
+              animationFromOpacity={anim?.fromOpacity}
               clipContent={anim?.clip}
             >
               {isActive || state.isTransitioning ? (

src/transitions/buildAnimationKeyframes.ts

@@ -13,6 +13,17 @@ export interface AnimationKeyframeResult {
   css: string;
   /** Animation delay in milliseconds (derived from spec.stagger × sceneIndex). */
   delay: number;
+  /**
+   * CSS `transform` value of the animation's `from` keyframe (e.g. `"translateX(100%)"`).
+   * Apply as an inline style fallback on the entering scene so it starts at the correct
+   * off-screen position during the brief window before @keyframes registers in the cascade.
+   */
+  fromTransform: string | undefined;
+  /**
+   * CSS `opacity` value of the animation's `from` keyframe.
+   * Apply as an inline style fallback on the entering scene for the same reason.
+   */
+  fromOpacity: number | undefined;
 }
 
 function negateValue(value: number | string): number | string {
@@ -272,5 +283,11 @@ export function buildAnimationKeyframes(
     `}`,
   ].join('\n');
 
-  return { name, css, delay };
+  return {
+    name,
+    css,
+    delay,
+    fromTransform: hasTranslate || hasScale ? fromTransform : undefined,
+    fromOpacity: hasOpacity ? opacityFrom : undefined,
+  };
 }