Scroll inertia adds smoothed, momentum-based motion driven by scroll velocity — a soft, weighted feel rather than a 1:1 scrub.
Where: Right sidebar → Interact → Interactions → “+” → Scroll — Add a scroll-inertia interaction
Key ideas
- Smoothing: smoothing and strength set how much lag/movement the velocity produces.
- Decay & direction: velocityReferenceSpeed, decay, and bidirectional shape how motion eases out and whether it reacts to both directions.
Steps
- Select the element.
- Add a scroll-inertia interaction.
- Set smoothing/strength and decay to taste.
Velocity-based motion
- Scroll inertia responds to scroll velocity and adds momentum/smoothing instead of mapping scroll position one-to-one.
- Strength and smoothing shape the response; decay controls how movement settles after scroll velocity changes.
- Bidirectional behavior determines whether the effect responds to motion in both scroll directions.
Tune and compare
- Add the interaction to the intended target and begin with modest strength.
- Adjust smoothing and decay while scrolling at different speeds; test both directions if enabled.
- Use Scroll scrub when the animation must correspond to an exact scroll progress point rather than velocity.
Tips
- Avoid using aggressive momentum on content that users need to read or control precisely.