Dynamics.applySlide()

Simulates a block sliding down an angled slope using real physics and gravity.

---

1. Basic Incline

Provide an angle (in degrees), and the engine uses gravity to smoothly slide the element diagonally down the slope.

Click to release the block!

60 FPS

import { applySlide } from 'animx/plugins/Dynamics';

applySlide('.block', {
  angle: 30,          // The downward slope angle in degrees
  gravity: 1200,      // Downward gravity constant
  friction: 0.99,     // Surface friction (0.99 = ice)
});

---

2. Sticky vs Smooth Slopes

The friction property represents how rough the surface of the slope is. If friction is high enough (like 0.94), the block will stop sliding entirely if the angle isn't steep enough!

Click to release!

Sticky

60 FPS

applySlide('.block', {
  angle: 25,
  friction: 0.94
});

---

3. Floor Hits and Momentum Handoffs

If you provide a bounds element, applySlide will detect when the element hits the bottom. It fires the onFloorHit callback and tells you exactly how fast it was moving. This lets you seamlessly pass that speed to another physics effect (like throwTo).

Slide and roll!

60 FPS

import { applySlide, throwTo } from 'animx/plugins/Dynamics';

applySlide('.block', {
  angle: 40,
  bounds: '#stage',
  onFloorHit: ({ vx }) => {
    // Transfer momentum to throwTo on floor contact
    throwTo('.block', {
      x: { velocity: vx, friction: 0.96 },
      rotate: { velocity: vx * 0.5, friction: 0.96 }
    }, { bounds: '#stage' });
  }
});

---

4. Adjustable Slope

You can dynamically adjust the slope angle in real-time. Notice how the rolling ball seamlessly changes its trajectory and accelerates faster on steeper inclines!

Use the slider to change the slope angle. Click to reset.

SLOPE

20°

60 FPS

applySlide('.ball', {
  angle: 45,
  gravity: 1200,
  friction: 0.99
});

---

5. Directional Gravity

The direction and gravityAngle properties allow you to change the vector of the gravitational pull. By default, gravity pulls straight down (direction: 'y', or gravityAngle: 90). You can pass a shorthand direction string ('x', 'y', '-x', '-y'), or define a precise gravityAngle in degrees to override the default downward pull.

Use the controls to change the gravity direction. Click to reset.

90°

60 FPS

applySlide('.block', {
  angle: 20,
  gravity: 1200,
  direction: 'x',
  // OR
  gravityAngle: 270
});

---

Properties & Methods

Option	Type	Default	Description
angle	number	30	The steepness of the slope in degrees. 0 = completely flat (element doesn't slide). 45 = a 45-degree ramp. 90 = vertical freefall.
gravity	number	980	The downward gravity force. 980 simulates Earth's gravity.
direction	string	'y'	Shorthand gravity direction. 'y' = straight down, 'x' = horizontally right.
gravityAngle	number	undefined	Exact gravity angle in degrees (90 is straight down, 0 is right). Overrides direction.
friction	number	0.99	How slippery the slope surface is. 0.99 = ice, barely any resistance. 0.94 = rough concrete that can stop the block entirely on shallow slopes. 1.0 = completely frictionless.
bounds	string | Element | { minX?: number, maxX?: number, minY?: number, maxY?: number }	null	A container element or custom bounds. Allows applySlide to detect wall/floor hits.
onFloorHit	Function	null	A function called when the element reaches the bottom of the bounds. Gives you the exact speed (vx and vy). Perfect for handing off to throwTo.