AnimX Docs

Appearance

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
js
import { Dynamics } from 'animx/dynamics'

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
js
Dynamics.applySlide('.block', {
  angle: 25,
  friction: 0.94 // High friction
});

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
js
Dynamics.applySlide('.block', {
  angle: 40,
  bounds: '#stage',
  onFloorHit: ({ vx, vy }) => {
    // We hit the bottom! Transfer momentum to throwTo
    Dynamics.throwTo('.block', {
      x: { velocity: vx, friction: 0.96 },
      rotate: { velocity: vx * 0.5, friction: 0.96 } // Spin it based on speed
    }, { bounds: '#stage' });
  }
});

Properties & Methods ​

OptionTypeDefaultDescription
anglenumber30The steepness of the slope in degrees. 0 = completely flat (element doesn't slide). 45 = a 45-degree ramp. 90 = vertical freefall.
gravitynumber980The downward gravity force. 980 simulates Earth's gravity.
frictionnumber0.99How 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.
boundsstring | Element | { minX?: number, maxX?: number, minY?: number, maxY?: number }nullA container element or custom bounds. Allows applySlide to detect wall/floor hits.
onFloorHitFunctionnullA 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.