Advanced Playgrounds
Interactive example
Reorder Animation
Live controls
Basic Reorder
Shuffle, reverse, or reset with smooth FLIP animations
Redred
Blueblue
Greengreen
Yellowyellow
Purplepurple
Orangeorange
Progress0%
Move Up / Down
Reorder with up/down buttons on each item
Finalize design system
Build REST API endpoints
Implement OAuth flow
Write integration tests
Set up CI/CD pipeline
Progress0%
Add & Remove
Add and remove items with enter/exit animations
Red
Blue
Green
Yellow
Purple
Orange
Progress60%
Grid Reorder
Animate items within a CSS Grid layout
Red
Blue
Green
Yellow
Purple
Orange
Progress0%
Animated Sequence
Pre-defined animation sequence using setTimeout to trigger layout changes
R
RedB
BlueG
GreenY
YellowP
PurpleO
OrangeProgress0%