Fix onboarding entry animations not triggering on first load (#22724)

The staggered entry animations on the onboarding welcome/sign-in and
sync-emails screens sometimes didn't play on first load, though a
refresh reliably fixed them.

Root cause: `OnboardingTransitionOutlet` wrapped pages in
`<AnimatePresence initial={false}>`. framer-motion propagates that
`initial: false` through `PresenceContext` to every descendant motion
component on the outlet's first render, so any
`OnboardingStepAnimatedItem` that mounts during that first commit snaps
straight to its final state instead of animating. Because onboarding
pages are preloaded (`lazyWithPreload`), a warm in-app navigation
renders the page synchronously in that first commit and the cascade is
suppressed; a cold load/refresh mounts it a commit later via Suspense,
so it animates.

Fix: drop `initial={false}`. Descendants no longer inherit a blocked
initial state, so the cascade animates regardless of preload timing. The
page-level fade now also runs on first entry, matching the treatment
already used on every step-to-step transition and cold load.

<!-- This is an auto-generated description by cubic. -->
<a
href="https://cubic.dev/pr/twentyhq/twenty/pull/22724?utm_source=github"
target="_blank" rel="noopener noreferrer"
data-no-image-dialog="true"><picture><source
media="(prefers-color-scheme: dark)"
srcset="https://www.cubic.dev/buttons/review-in-cubic-dark.svg"><source
media="(prefers-color-scheme: light)"
srcset="https://www.cubic.dev/buttons/review-in-cubic-light.svg"><img
alt="Review in cubic"
src="https://www.cubic.dev/buttons/review-in-cubic-dark.svg"></picture></a>
<!-- End of auto-generated description by cubic. -->

This commit is contained in:

Raphaël Bosi

2026-07-09 15:32:58 +02:00

committed by

GitHub

parent 9ffd5866c9

commit c8c38b6cd2

1 changed files with 1 additions and 1 deletions

									
										packages/twenty-front/src/modules/onboarding/components/OnboardingTransitionOutlet.tsx
									
		+1
		-1
	
												View File
												
				@@ -29,7 +29,7 @@ export const OnboardingTransitionOutlet = () => {

				  return (

				    <StyledTransitionContainer>

				      <AnimatePresence initial={false}>

				      <AnimatePresence>

				        <StyledTransitionPage

				          key={pathname}

				          initial={{ opacity: 0 }}