Rotate In Animation - Svelte-motion Typing CST Test
Loading…
Rotate In Animation — Svelte-motion Code
Rotates a div while fading in.
# svelte_motion/demo/RotateIn.svelte
<script>
import { motion } from 'svelte-motion'
</script>
<motion.div
initial={{ rotate: -180, opacity: 0 }}
animate={{ rotate: 0, opacity: 1 }}
style="width:100px; height:100px; background:cyan;"
/>Svelte-motion Language Guide
Svelte-Motion is a lightweight, physics-based animation library for Svelte that provides spring-driven transitions, gesture integration, and declarative motion components. It brings natural and fluid animations to Svelte apps using springs instead of fixed-duration tweens.
Primary Use Cases
- ▸Animate component entry/exit
- ▸Smooth element transitions using spring dynamics
- ▸Dragging, gestures, and physics-based interactivity
- ▸Animating sequences, lists, and layout changes
- ▸Interactive hover or press effects
Notable Features
- ▸Physics-based spring animations
- ▸Svelte actions + store-based values
- ▸Simple API similar to Framer Motion’s Motion components
- ▸Gesture support (drag, pan)
- ▸Composable animation controls and variants
Origin & Creator
Svelte-Motion was created by the Svelte community, inspired by Framer Motion and React Spring, and emerged around 2020 as a physics-based animation solution tailored for Svelte’s reactivity.
Industrial Note
Used in dashboards, interactive UIs, creative websites, product demos, and Svelte apps that require fluid, physics-driven motion with lightweight performance.