BouncingBall

Rolling ball on tilting bar animation

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

Rolling ball on tilting bar animation