Skip to main content

​
Advanced Animations

Make your app feel alive with smooth, professional animations. From simple fades to complex gesture-driven interactions, Vibecode supports it all.

​
Why Animations Matter

Good animations make your app:
  • Feel responsive - Instant feedback to user actions
  • Look polished - Professional, premium quality
  • Easier to use - Visual cues guide users
  • More engaging - Delightful to interact with
  • Clearer - Show relationships and transitions
Native performance: Animations run at 60fps on the device’s graphics processor, not the JavaScript thread

​
Types of Animations

​
Basic Animations

  • Fade in/out
  • Slide transitions
  • Scale (grow/shrink)
  • Rotate
  • Color changes
  • Opacity

​
Layout Animations

  • Items entering/exiting lists
  • Expanding/collapsing sections
  • Reordering items
  • Screen transitions
  • Tab changes

​
Gesture-Driven

  • Swipe to delete
  • Pull to refresh
  • Drag and drop
  • Pinch to zoom
  • Pan to navigate

​
Physics-Based

  • Spring animations (bouncy feel)
  • Momentum scrolling
  • Decay (slow to stop)
  • Snap points

​
Advanced Effects

  • Parallax scrolling
  • Shared element transitions
  • Morphing shapes
  • Lottie animations (JSON-based)
  • Particle effects

​
Animation Libraries Available

Vibecode apps can use:

​
React Native Animated

  • Built into React Native
  • Good for simple animations
  • Performant and reliable

​
Reanimated

  • Advanced animations and gestures
  • Runs on UI thread (super smooth)
  • Complex interactions
  • Gesture-driven animations

​
Lottie

  • Designer-created animations
  • Exported from After Effects
  • Plays JSON animation files
  • Complex animations without code

​
Skia

  • 2D graphics and drawing
  • Custom shapes and effects
  • Advanced rendering

​
How to Add Animations

Just describe the animation you want: 
"When the screen loads, fade in the content over 0.5 seconds"
Claude will choose the right animation approach and implement it!

​
Common Animation Patterns

​
Button Press Feedback

Make buttons feel responsive: Effects:
  • Scale down slightly when pressed
  • Change color/opacity
  • Haptic feedback
  • Quick bounce-back
Example: 
"When the save button is tapped, scale it down to 95%,
add haptic feedback, then bounce back with a success checkmark"

​
List Item Animations

Bring lists to life: Entry animations:
  • Fade in one by one
  • Slide in from side
  • Scale up from center
  • Stagger (cascading effect)
Exit animations:
  • Fade out
  • Slide away
  • Shrink and disappear
  • Collapse space smoothly
Example: 
"When items are added to the todo list, fade them in
from the top with a slight downward slide"

​
Screen Transitions

Navigate smoothly between screens: Transition types:
  • Slide (left/right/up/down)
  • Fade
  • Modal (slide up from bottom)
  • Flip
  • Zoom
  • Shared element
Example: 
"When tapping a photo thumbnail, expand it to full screen
with a zoom animation, maintaining position during transition"
Shared element transitions make related screens feel connected—like tapping an image that smoothly expands into a detail view.

​
Loading States

Show progress elegantly: Options:
  • Skeleton screens (content placeholder)
  • Shimmer effect (loading wave)
  • Spinner with fade-in
  • Progress bar
  • Pulsing placeholders
Example: 
"While loading data, show skeleton cards that shimmer.
When data arrives, fade out skeletons and fade in real content"

​
Pull to Refresh

Classic mobile pattern: How it works:
  1. User pulls down on list
  2. Loading indicator appears
  3. Data refreshes
  4. Indicator hides, list updates
Example: 
"Add pull-to-refresh with a circular loading spinner.
Show 'Refreshing...' text and haptic feedback when triggered"

​
Swipeable Items

Touch-friendly gestures: Common uses:
  • Swipe to delete
  • Swipe to archive
  • Swipe for actions (like Mail app)
  • Swipe between pages
Example: 
"Let users swipe email items left to show delete/archive buttons,
or swipe right to mark as read. Smooth spring animation on release"

​
Advanced Animation Concepts

​
Spring Physics

Natural, bouncy animations: Settings:
  • Stiffness - How tight the spring (higher = faster)
  • Damping - Bounce amount (lower = more bouncy)
  • Mass - Weight feeling (higher = slower)
When to use:
  • Interactive elements
  • Gesture releases
  • Natural motion
  • Playful feel
Example: 
"When modal appears, use a bouncy spring animation
that overshoots slightly then settles"

​
Gesture Animations

Animations that follow your finger: Techniques:
  • Pan (drag)
  • Pinch (zoom)
  • Rotation
  • Multi-touch
Example: 
"Build a photo viewer where users can pinch to zoom,
drag to pan, and rotate with two fingers. Animations
follow finger movement smoothly"

​
Stagger Animations

Create cascading effects: How it works:
  • Animate items one after another
  • Small delay between each
  • Creates flowing effect
Example: 
"When the menu appears, fade in each menu item with
a 50ms delay between them, starting from the top"

​
Sequence Animations

Multiple animations in order: Pattern:
  1. First animation completes
  2. Second animation starts
  3. Third animation follows
  4. And so on…
Example: 
"When submitting form:
1. Scale down the submit button
2. Show a checkmark with fade in
3. Slide up a success message
4. After 2 seconds, navigate to home screen"

​
Parallel Animations

Multiple animations at once: Example: 
"When the card appears, simultaneously:
- Fade in from 0 to 100% opacity
- Slide up 20 pixels
- Scale from 95% to 100%
All over 400ms with ease-out timing"

​
Lottie Animations

Use designer-created animations:

​
What is Lottie?

  • Animation files exported from After Effects
  • JSON format (small file size)
  • Fully customizable
  • Professional quality

​
Where to Get Lottie Files

  • LottieFiles.com (thousands free)
  • Create your own in After Effects
  • Hire designer on Fiverr/Upwork
  • Use Vibecode AI to generate (coming soon)

​
How to Use

Example: 
"Add a Lottie loading animation from this URL:
[lottie file URL]
Play it while data is loading, then fade it out"
Customization: 
"Use this Lottie success checkmark animation, but change
the green color to blue to match my brand"

​
Micro-interactions

Small animations that matter: Examples:
  • Like button - Heart pops and changes color
  • Toggle switch - Smooth slide with color change
  • Input focus - Border color animates in
  • Checkbox - Checkmark draws in
  • Badge - Number increments with bounce
These tiny details make apps feel premium.
Less is more: Don’t animate everything. Use animations purposefully where they add value or clarity.

​
Animation Timing

​
Duration

How long animations should last:
  • Fast (100-200ms) - Micro-interactions, hover effects
  • Normal (300-400ms) - Most transitions, fades
  • Slow (500-800ms) - Complex transitions, page changes
  • Very slow (1000ms+) - Cinematic effects, splash screens
Rule of thumb: Fast enough to feel responsive, slow enough to see what happened.

​
Easing Functions

How animations accelerate/decelerate:
  • Linear - Constant speed (robotic, rarely used)
  • Ease-in - Starts slow, ends fast
  • Ease-out - Starts fast, ends slow (most common)
  • Ease-in-out - Slow start and end, fast middle
  • Spring/Bounce - Overshoots then settles
Example: 
"Slide the modal in with ease-out timing so it
decelerates smoothly as it settles into place"
Most animations should use ease-out—it feels natural because objects in the real world decelerate as they come to rest.

​
Performance Tips

Use native driver: Tell Claude to use the native animation driver for smooth 60fps performance.
Avoid animating layout: Animate transforms (translate, scale, rotate) and opacity—these are super fast. Avoid animating width/height which is slower.
Reduce complexity: Simpler animations perform better. If it’s laggy, simplify the effect.

​
Accessibility

Make animations accessible: Considerations:
  • Respect “Reduce Motion” system setting
  • Provide alternative feedback (haptics)
  • Don’t rely solely on animation to convey info
  • Keep motion subtle to avoid nausea
Example: 
"Add a slide-in animation for new items, but if the user
has 'Reduce Motion' enabled, just fade them in instead"

​
Example Animation Prompts

​
Beginner

Simple Fade
"When the welcome screen appears, fade in the logo
over 1 second, then fade in the tagline below it"

​
Intermediate

Interactive List
"Make the todo list items swipeable:
- Swipe right to mark complete (green background)
- Swipe left to delete (red background)
- Spring back if not swiped far enough
- Smooth slide-out animation when deleted"

​
Advanced

Complex Transition
"Build an Instagram-style photo grid. When tapping a photo:
- Expand it smoothly from grid position to full screen
- Fade out other photos
- Show detail info sliding up from bottom
- Swipe down to dismiss with spring physics
- Return photo to exact grid position"

​
Troubleshooting

Animations laggy?
  • Use native driver
  • Simplify the animation
  • Reduce number of simultaneous animations
  • Check device performance
Animation feels wrong?
  • Adjust timing (try slower/faster)
  • Change easing function
  • Add spring physics
  • Reduce distance traveled
Gesture not working?
  • Check gesture handler is enabled
  • Verify touch area is large enough
  • Ensure no overlapping touch handlers
  • Test on real device (not simulator)
Ready to animate your app? Just pinch to build and describe the animations you want. Claude will implement smooth, professional motion!