GravityJS

All components use real physics (Hooke's Law)

Buttons - Real Physics Hover

Uses Hooke's Law (F = -kx) with real physics

Scale: 1.08 Bounce: 0.6 Friction: 0.3 Elasticity: 0.6

Banners - Real Physics Slide

Uses Hooke's Law for slide-in animation

Distance: 120px Bounce: 0.7 Friction: 0.2 Elasticity: 0.7

Accordion - Real Physics

Uses Hooke's Law for open/close animation

Bounce: 0.6 Friction: 0.3 Elasticity: 0.6

What is GravityJS?◂

GravityJS is a physics-based animation library that brings real-world gravity effects to your web elements.

How do I get started?◂

Simply add the data-gravity attribute to any HTML element, and it will automatically respond to physics.

Is it free to use?◂

Yes! GravityJS is open source and completely free to use in both personal and commercial projects.

Menu - Real Physics Hover

Uses Hooke's Law with real physics

Scale: 1.1 Bounce: 0.5 Friction: 0.3 Elasticity: 0.5

Cards - Real Physics Hover

Uses Hooke's Law for scale and shadow

Scale: 1.05 Shadow: 30px Bounce: 0.5 Friction: 0.3 Elasticity: 0.6

⚡

Fast Performance

GravityJS is optimized for smooth 60fps animations using requestAnimationFrame.

🔧

Fully Customizable

Control mass, elasticity, friction, air drag, and more with simple data attributes.

📱

Mobile Friendly

Works great on all devices with touch support and responsive behavior.

Form Elements - Real Physics

Uses Hooke's Law for focus animation

Scale: 1.02 Bounce: 0.5 Friction: 0.3 Elasticity: 0.6

Email Address

Password

Country

Alerts - Real Physics Slide

Uses Hooke's Law for slide-in animation

Distance: 100px Bounce: 0.6 Friction: 0.3 Elasticity: 0.6

ℹ️

Information

This is an informational message for the user.

✅

Success

Your action was completed successfully!

⚠️

Warning

Please review your input before proceeding.

Badges - Real Physics Pulse

Uses Hooke's Law for pulse animation

Scale: 1.15 Bounce: 0.6 Friction: 0.2 Elasticity: 0.7

Primary Success Warning Danger

Progress Bars - Real Physics

Uses Hooke's Law for width animation

Bounce: 0.5 Friction: 0.4 Elasticity: 0.5

Upload Progress75%

Download Complete100%

Processing45%

Materials - Mechanics of Materials

Hover & click each material to feel different spring constants, mass, and squash-and-stretch deformation

🪨

Rigid

Very stiff, well-damped. No deformation. Glass / hard plastic feel.

🔩

Metal

Heavy, slight overshoot. Barely any squash. Dense, authoritative snap.

🎾

Rubber

Balanced bounce with visible squash-and-stretch. Natural elastic response.

🍮

Jelly

Soft, underdamped, maximum squash-and-stretch deformation. Fun & bouncy!

Tilt - Hover Tilt & Lift

Hover and click the cards - physics-driven rotation + translateY spring on mouseenter/leave

🎾

Rubber Tilt

8° · 8px lift

🍮

Jelly Tilt

5° · 12px lift · blur

🔩

Metal Tilt

12° · 4px lift

🪨

Rigid Tilt

6° · 6px lift