` with ``, Svelte may treat > `.headline` as unused because the class is now passed to a component. Use > [`scoped:class` with @humanspeak/svelte-scoped-props](/docs/scoped-motion-classes) > when you need parent-scoped CSS to survive that boundary. > Live example: [/examples/animated-button](https://motion.svelte.page/examples/animated-button) ### Key advantages Here's when it's the right choice for your project. - **Built for Svelte.** Sometimes finding examples for animations with Svelte can be tricky. Svelte Motion is attempting to provide an exact copy of the Motion for React API which there is a lot of examples for out there in the wild. - **Animate anything.** CSS has hard limits. There are values you can't animate, keyframes you can't interrupt, staggers that must be hardcoded. Svelte Motion provides a single, consistent API that handles everything from simple transitions to advanced scroll, layout, and gesture-driven effects. - **App-like gestures.** Standard CSS `:hover` events can be unreliable on touch devices. Svelte Motion provides robust, cross-device gesture recognizers for tap and hover. ### When is CSS a better choice? For simple, self-contained effects (like a color change on hover) a standard CSS transition is a lightweight solution. The strength of Svelte Motion is that it can do these simple kinds of animations but also scale to anything you can imagine—using the same easy to write and maintain API. ## Install Svelte Motion is available via npm: ```bash npm install @humanspeak/svelte-motion ``` Features can now be imported: ```js import { motion } from '@humanspeak/svelte-motion' ``` ## Your first animation The `` component is the core API in Svelte Motion. It's a DOM element, supercharged with animation capabilities. ```svelte ``` > Live example: [/examples/rotate](https://motion.svelte.page/examples/rotate) When values in `animate` change, the component will animate. Svelte Motion has intuitive defaults, but animations can of course be configured via the `transition` prop. ```svelte Scaling div ``` ## Enter animation When a component enters the page, it will automatically animate to the values defined in the `animate` prop. You can provide values to animate from via the `initial` prop (otherwise these will be read from the DOM). ```svelte Scaling button ``` Or disable this initial animation entirely by setting `initial` to `false`. ```svelte No initial animation ``` ## Hover & tap animation `` extends Svelte's event system with powerful gesture animations. It currently supports hover and tap. ```svelte Interactive button ``` > Live example: [/examples/hover-and-tap](https://motion.svelte.page/examples/hover-and-tap) ## Scroll animation Svelte Motion supports scroll-triggered animations via the `whileInView` prop. Elements can animate when they enter the viewport: ```svelte I animate when scrolled into view ``` > Live example: [/examples/while-in-view](https://motion.svelte.page/examples/while-in-view) The `whileInView` prop works like `whileHover` and `whileTap`—it defines the target animation state when the element is in the viewport. When the element leaves the viewport, it animates back to its baseline state. You can also use lifecycle callbacks: ```svelte console.log('Entered viewport')} onInViewEnd={() => console.log('Left viewport')} /> ``` Configure the underlying IntersectionObserver with the `viewport` prop: ```svelte ``` - `once: true` — fire entry once, latch, never animate back - `amount` — `number` (0-1), `'some'` (any pixel), or `'all'` (fully visible) - `margin` — CSS margin string applied to the IntersectionObserver root box - `root` — custom IntersectionObserver root (defaults to the viewport) For scroll-linked animations (where values track scroll position), use utilities like `useTime`/`useTransform`: ```svelte ``` ## Layout animation Animate between changes in layout using transforms. It's as easy as applying the `layout` prop. ```svelte ``` - `layout` animates translation and scale between layout changes. - `layout="position"` animates translation only. - `layoutId` animates between different elements that share the same identifier (shared layout animations). See [Layout Animations](/docs/layout-animations) for the full guide. ## Exit animations By wrapping motion components with `AnimatePresence` you gain access to exit animations. This allows you to animate elements as they're removed from the DOM. ([Reference](https://motion.dev/docs/react)) ```svelte {#if show} {/if} (show = !show)}> Toggle ``` Transition precedence for exit timing (merged): - `exit.transition` (highest precedence) - component `transition` (merged with any `MotionConfig` defaults) - fallback `{ duration: 0.35 }` ## Variants Variants let you give names to animation states and reference them by string. Pair them with the `custom` prop for per-instance values — common for staggered lists where each child needs its own offset. ```svelte {#each items as item, i} {item} {/each} ``` - A variant entry can be a static keyframes object **or** a `(custom) => keyframes` factory. - `custom` is forwarded to the factory each time the variant is resolved (initial, animate, or exit). - Children with no `custom` prop inherit the nearest motion ancestor's value — matching Framer Motion's variant-tree propagation. ## Learn next That's a quick overview of Svelte Motion's basic features. Next, explore animation patterns, layout, and gestures—or dive straight into our examples.