Animation and motion: live code examples
20 examples for 4 libraries. Open one to read how it works, run it in your browser and change it, by hand or with AI.
All 231 examples UI components and icons Utilities Forms, validation and schemas 3D and graphics Web frameworks State and data fetching Markdown, editors and content Files, images and media Styling and CSS Auth and security libraries Charts and data visualisation HTTP clients and networking Game development
tw-animate-css 5 examples · usage and stats
Exit animations with data-state in tw-animate-cssPress the button to switch data-state between show and hide.
Slide-in animations in tw-animate-cssEach tile slides from a different side; press Replay to see them again.
Staggered delays in tw-animate-cssPress Replay to watch the four items enter one after another.
Looping animations in tw-animate-cssAll three loops use the same repeat and direction classes with different enter effects.
Enter animations in tw-animate-cssClick Replay to mount the card again and watch the entrance.Framer Motion 5 examples · usage and stats
The animate prop in Framer MotionClick Toggle to switch the box between its two animate targets.
Drag with useTransform in Framer MotionDrag the card left or right to see it fade and tilt.
useSpring in Framer MotionMove your pointer over the area and watch the pink dot trail behind the gray one.
Shared layout animations with layoutIdClick the tabs to move the underline between them.
Hover and tap gestures in Framer MotionHover and click the button, then click into the text field.Motion 5 examples · usage and stats
The animate() function in MotionThe box spins once on load; click Rotate again to add another full turn.
Easing, duration and delay in MotionWatch how the circInOut box speeds up and slows down while the linear one moves at a constant pace; press Replay to compare again.
Spring animations in MotionThe cards rotate 90 degrees on load; toggle the button and compare how the three stiffness values settle.
Stagger animations in MotionThe five items cascade in on load; press Replay to see the stagger again.
Repeating animations in MotionThe spinner and the pulse loop forever; the ball hops four times, and Bounce again plays it once more.GSAP 5 examples · usage and stats
Grid stagger in GSAPClick different dots, including corners, to see the ripple start from each one.
Easing in GSAPAdd another string such as "elastic.out" or "expo.inOut" to the eases array to see a new row.
Staggered animations in GSAPClick a button to restart the wave from a different position in the row.
Sequencing with a GSAP timelineChange the orange tween's position from 1 to another number and press Replay to see where it lands.
Controlling a tween in GSAPPress play, then try reverse and the speed buttons while the box is moving.