---
title: "BouncingBall — Free Framer component · Best of Framer"
description: "Free Framer component · by Hamim Reza · Effects. Rolling ball on tilting bar animation"
canonical: "https://framer.elliotli.dev/component/bouncingball"
---

[Home](/)/[Components](/components)/[Effects](/components/category/effects)/BouncingBall

# BouncingBall

Rolling ball on tilting bar animation

[View on Framer](https://framer.com/marketplace/components/bouncingball/?via=elliot-li)

![BouncingBall preview image 1](https://framer.elliotli.dev/og/component/bouncingball/e499f50f2d37c25f/1600x1200.jpg)

## Summary

Rolling ball on tilting bar animation

## Description

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)
    

![](https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/description-image-8svokebu-j3BUnAu6jnNjb3auvh7nXU22pOkOLy)

## 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

## Rank history [How rankings work →](/terms#rankings)

-   All · #6300

## Details

- **Author**: Hamim Reza
- **Published**: 2026-04-14
- **Updated**: 2026-04-14
- **Added**: 2026-04-03
- **Categories**: Effects

## More like this

-   [Particle Image](/component/particle-image) — Jamik · $12 — Logos and photos as 3D points
-   [Ascii Portrait](/component/ascii-portrait) — The Black Sheep · Free — Photos that dissolve into ASCII
-   [Sandfall](/component/sandfall) — Cyedi Creative Studio · $5 — Your headline, buried in coloured
-   [Still Water](/component/still-water) — DariStudio · $9 — Water ripples over any photo