Quickstart guide
Get Animation Playground running locally in just a few minutes. By the end of this guide, you’ll have the interactive playground running and create your first custom animation.What you’ll build
You’ll set up the Animation Playground and use the Timeline Editor to create a custom keyframe animation with multiple properties - all without writing any code.Prerequisites
Before you begin, make sure you have:- Node.js 20 or later installed
- A package manager (npm, yarn, pnpm, or bun)
- Git for cloning the repository
Install dependencies
Install the required packages using your preferred package manager:This will install the core dependencies:
- Next.js 15.2.2 for the framework
- Framer Motion 12.5.0 for React animations
- GSAP 3.12.7 for JavaScript animations
- React Spring 9.7.5 for physics-based animations
Start the development server
Launch the development server:The server will start on
http://localhost:3000. Open this URL in your browser.Navigate to the Playground tab
Once the application loads, you’ll see several tabs at the top:
- Basics
- Advanced
- CSS
- JavaScript
- React
- Compare
- Performance
- Playground ← Click this one
- Challenges
Create your first animation
Now let’s create a custom animation using the Timeline Editor:
- Add a keyframe - Click the “Add Keyframe” button to create a second animation step
-
Adjust properties - Click on the new keyframe and use the sliders to modify:
- X: Move the element horizontally (-200px to 200px)
- Y: Move the element vertically (-200px to 200px)
- Scale: Change size (0.5x to 3x)
- Rotate: Rotate the element (-200° to 200°)
- Opacity: Adjust transparency (0 to 1)
- Add more keyframes - Create additional steps for complex animations
- Reorder keyframes - Drag and drop keyframes to change the animation sequence
- Preview - Click “Play” to see your animation in action
- Keyframe 1:
x: 0, y: 0, scale: 1, rotate: 0, opacity: 1 - Keyframe 2:
x: 100, y: -50, scale: 1.5, rotate: 180, opacity: 0.8 - Keyframe 3:
x: 0, y: 0, scale: 1, rotate: 360, opacity: 1
Explore other features
Now that you have the playground running, explore these other interactive features:CSS animations
Navigate to the CSS tab to experiment with pre-defined animations like fade-in, slide-in, rotate, pulse, and bounce. Adjust duration, timing functions, and iteration count to see how they affect the animation.
JavaScript animations
Check out the JavaScript tab to see
requestAnimationFrame, GSAP, and Canvas animations in action. Click the buttons to trigger different animation techniques.React libraries
Visit the React tab to explore Framer Motion, React Spring, and other React animation libraries. Try the drag-and-drop gestures and sortable lists.
Performance metrics
Go to the Performance tab to monitor FPS (frames per second) and learn optimization techniques. Test how many elements you can animate while maintaining 60 FPS.
Understanding the Playground interface
The Timeline Editor provides several controls:| Control | Description |
|---|---|
| Add Keyframe | Creates a new animation step with properties copied from the last keyframe |
| Play/Stop | Previews your animation sequence with infinite looping |
| Keyframe cards | Click to select and preview a specific animation state |
| Property sliders | Adjust x, y, scale, rotate, and opacity values for each keyframe |
| Drag handles | Reorder keyframes by dragging them up or down |
Next steps
Now that you’ve created your first animation, here are some suggestions for what to explore next:Core concepts
Learn about transform properties, timing functions, and animation principles in the Basics tab
Animation challenges
Test your skills with interactive challenges in the Challenges tab
Installation guide
Learn about the full dependency stack and deployment options
Performance tips
Understand how to create smooth, efficient animations in the Performance tab
Troubleshooting
Port 3000 is already in use
Port 3000 is already in use
If port 3000 is already in use, Next.js will automatically try the next available port (3001, 3002, etc.). Check your terminal output for the actual URL.Alternatively, specify a custom port:
Module not found errors
Module not found errors
If you see module import errors, try deleting
node_modules and reinstalling:Animations feel laggy
Animations feel laggy
Performance can vary based on your device. Try:
- Closing other browser tabs
- Reducing the number of animated elements in the Performance tab
- Using Chrome DevTools Performance profiler to identify bottlenecks
Found a bug or have suggestions? Reach out on Twitter at @codingpastor or use the Contact Support button in the bottom-left corner of the playground.