An animated ball rolling back and forth on a tilting seesaw bar. The ball rotates as it rolls and the bar tilts in sync creating a realistic physics-like effect. Five animation presets from gentle glide to energetic bounce. Built for loading indicators, decorative hero elements, gamification UI, and playful onboarding screens.
Ball rolls across bar with rotation animation
Bar tilts in sync with ball motion for seesaw effect
Small eye dot on ball adds character and visualizes rotation
Five animation presets — classic, fast bounce, slow roll, energetic, smooth glide
Configurable animation duration (1–10s)
Configurable ball size (20–100px)
Configurable bar width and height
Ball color, bar color and eye dot color controls
Supports fixed, fill and fit-content layout modes
Auto-calculates container height to prevent clipping in fit-content mode
Hardware-accelerated CSS keyframe animations — no JavaScript during animation
No re-renders during animation loop
No dependencies
Classic — standard bounce · moderate bar tilt ±15° · 360° ball rotation
Fast Bounce — quick energetic movement · ±25° tilt · 720° rotation · 60% faster
Slow Roll — gentle relaxed motion · ±10° tilt · 180° rotation · 50% slower
Energetic — spring-like dynamic bounce · ±30° tilt · 540° rotation · 20% faster
Smooth Glide — fluid elegant movement · ±8° tilt · 360° rotation · 20% slower
Appearance
Ball Color · Bar Color · Ball Eye Color
Dimensions
Bar Width (min 100px) · Bar Height (5–50px) · Ball Size (20–100px)
Animation
Animation Preset — classic, fast bounce, slow roll, energetic, smooth glide
Animation Duration — speed control (1–10s)
CSS keyframe animations for hardware-accelerated performance
Transforms — rotate and translate for ball and bar motion
Infinite loop with alternating direction
1 second delay before animation starts
Auto height calculation in fit-content mode
No JavaScript during animation loop — zero re-renders
Loading indicators · Decorative hero elements · Gamification UI · Onboarding screens · Empty states · Playful brand experiences · Interactive physics demos · Attention-grabbing sections
SEO Keywords
framer bouncing ball · framer ball animation · framer loading animation · framer rolling ball · framer animated loader · framer ball loader · framer physics animation · framer playful animation · framer seesaw animation · framer decorative animation · framer loading indicator · framer interactive animation · framer fun component · framer code component · framer ball component
Hamim Reza
