BouncingBall

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.

Features

• 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

Animation Presets

• 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

Property Controls

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)

Technical Details

• 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

Use Cases

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