# Optimized appear > Start SSR appear animations before hydration **Source:** [https://motion.svelte.page/docs/optimized-appear](https://motion.svelte.page/docs/optimized-appear) --- Optimized appear starts mount animations from the server-rendered DOM before Svelte hydrates. It mirrors Framer Motion's `data-framer-appear-id` handoff: the SSR element receives an appear id, an inline bootstrap starts WAAPI opacity/transform animation, and the Svelte Motion runtime commits and continues from that visual state during hydration. ```svelte ``` No additional prop is required. Svelte Motion enables optimized appear when all of these are true: - `initial` resolves to non-empty keyframes. - `animate` resolves to non-empty keyframes. - `initial={false}` is not set. - The enter animation includes WAAPI-friendly `opacity` and/or transform values. ## Public helpers `startOptimizedAppearAnimation` is exported for low-level integrations that need to start a handoff animation manually. ```ts import { optimizedAppearDataAttribute, startOptimizedAppearAnimation } from '@humanspeak/svelte-motion' element.setAttribute(optimizedAppearDataAttribute, 'hero') startOptimizedAppearAnimation(element, 'opacity', [0, 1], { duration: 0.4 }) ``` Most applications should use declarative `motion.*` components instead of calling the helper directly. ## Related - [API Reference](/docs/api-reference) — exported helpers and SSR behavior - [Tree Shaking](/docs/tree-shaking) — import only the animation surface you need - [Optimized appear example](/examples/optimized-appear) — live SSR handoff demo