Scroll Easing¶

Easing is the shape of a scroll - whether it whooshes off and glides to a halt, ramps up gradually, or bounces past the target before settling.

The same scroll, with different easing, can feel snappy, deliberate, sluggish, or playful. It's one of the cheapest ways to make scrolling feel intentional rather than mechanical.

Setting an easing

Scroll.forDocument
    >> Scroll.toElement "features"
    >> Scroll.speed 800
    >> Scroll.easing QuintOut
    >> Scroll.build

Sensible default

If you're not sure which easing to start with, try CubicOut for short scrolls and QuintOut for long ones. Both feel deliberate without drawing attention to themselves.

Standard Easings¶

These are the standard easing curves calculated using the functions from elm-community/easing-functions.

Linear¶

Constant speed throughout. Useful when you want neutral movement with no acceleration or deceleration.

Ease¶

The standard CSS easing functions.

Easing	Feel
`EaseIn`	Starts slow, ends fast
`EaseOut`	Starts fast, ends slow
`EaseInOut`	Slow at both ends

Sine¶

Gentle, subtle easing based on sine curve.

Easing	Feel
`SineIn`	Gentle acceleration
`SineOut`	Gentle deceleration
`SineInOut`	Gentle both ends

Quad¶

Quadratic (power of 2) — slightly more pronounced than sine.

Easing	Feel
`QuadIn`	Moderate acceleration
`QuadOut`	Moderate deceleration
`QuadInOut`	Moderate both ends

Cubic¶

Cubic (power of 3) — more noticeable acceleration/deceleration.

Easing	Feel
`CubicIn`	Noticeable acceleration
`CubicOut`	Noticeable deceleration
`CubicInOut`	Noticeable both ends

Quart¶

Quartic (power of 4) — dramatic effect.

Easing	Feel
`QuartIn`	Strong acceleration
`QuartOut`	Strong deceleration
`QuartInOut`	Strong both ends

Quint¶

Quintic (power of 5) — very dramatic.

Easing	Feel
`QuintIn`	Very strong acceleration
`QuintOut`	Very strong deceleration
`QuintInOut`	Very strong both ends

Expo¶

Exponential — extremely dramatic.

Easing	Feel
`ExpoIn`	Explosive acceleration
`ExpoOut`	Explosive deceleration
`ExpoInOut`	Explosive both ends

Circ¶

Circular — based on quarter circle.

Easing	Feel
`CircIn`	Circular acceleration
`CircOut`	Circular deceleration
`CircInOut`	Circular both ends

Back¶

Overshoots slightly then returns.

Easing	Feel
`BackIn`	Pulls back then accelerates
`BackOut`	Overshoots then settles
`BackInOut`	Both effects

Elastic¶

Spring-like bounce effect.

Easing	Feel
`ElasticIn`	Winds up like a spring
`ElasticOut`	Springs and oscillates
`ElasticInOut`	Both effects

Bounce¶

Bouncing ball effect.

Easing	Feel
`BounceIn`	Bounces at start
`BounceOut`	Bounces at end
`BounceInOut`	Both effects

CubicBezier¶

Custom easing curve defined by two control points — the same format used by CSS cubic-bezier().

View Source Code

CubicBezier 0.68 -0.55 0.265 1.55

The four parameters (x1 y1 x2 y2) define the curve's control points. Use tools like cubic-bezier.com to visualize and create custom curves.

Choosing an Easing for Scroll¶

Use Case	Recommended Easing	Why
Short scroll jumps	`CubicOut`	Smooth without feeling exaggerated.
Long scroll jumps	`QuintOut`	Feels deliberate and controlled over distance.
Focused destination jumps	`SineOut` / `CubicOut`	Gentle settle, no visual noise.
Playful interactions	`BackOut` / `ElasticOut` / `BounceOut`	Expressive - use sparingly.

Practical guidance

Keep Elastic and Bounce for moments you want the user to notice. For everyday navigation, Out variants are clearer and less distracting.

Default¶

If you don't set an easing, scrolls run on Linear - a constant rate from start to finish. That's deliberate for scrolling (no surprise overshoot) but most scrolls feel better with even a mild CubicOut.

Next Steps¶

You've covered every scroll concept. Browse the full catalogue of live examples.

Examples →