Scroll animation

Import ScrollAnimation from @waaark/luge, register it with luge.addPlugin('scroll', ScrollAnimation), then call luge.init(). See Getting started for a complete setup.

Animates elements on scroll.

Usage

<div
  class="my-element"
  data-lg-scroll>
</div>

Animatable properties

The following properties can be used to animate elements on scroll:

opacity
background-x | background-y
x | y | z
rotate | rotateX | rotateY | rotateZ
scale | scaleX | scaleY | scaleZ

They can be used in a JSON string set in the data-lg-scroll-animate attribute:

<div
  class="my-element"
  data-lg-scroll
  data-lg-scroll-animate="{'x': ['0%', '100%'], 'opacity': ['0', '1']}">
</div>

These properties will progress from the start to the end value while the element progresses in the viewport during scroll.

Use matching units at both ends. Supply explicit length units for translations, such as ['0px', '100px'] or ['0%', '100%']; rotation defaults to degrees, and opacity and scale use unitless values. The parser does not interpolate arbitrary CSS expressions such as calc() or mix units.

Preset animations

The following preset animations can also be used instead of setting individual properties:

background-x : changes background-x position from 0% to 100%.
background-y : changes background-y position from 0% to 100%.

CSS animations

When not using data-lg-scroll-animate attribute or a preset animation, scroll animated elements get CSS variables:

--progress: contains the element's progress (from 0 to 1) inside the viewport during scroll (see ScrollObserver).
--diff: when using inertia (see attributes), contains the difference between the expected progress and the delayed one.
--abs-diff : contains the absolute value of the --diff variable.

You can use these variables to create your own CSS scroll animations:

.my-element {
  transform: rotateY( calc( var(--progress) * 180deg ) );
}

Attributes

Attribute	Type	Default	Description
`data-lg-scroll`	String	unset	The preset animation to use.
`data-lg-scroll-animate`	String	unset	A JSON string containing the properties animations (see Animatable properties).
`data-lg-scroll-inertia`	Number	0.1	The inertia strength, which adds smoothness to the animation. You can use a string like `{0.25,0.75}` to use a random value in this range. The default value can be changed globally in JS `luge.settings({scroll: {inertia: 0.1}})`.
`data-lg-scroll-start`	Number	1	Viewport fraction used for the start boundary: `1` is the bottom of the viewport.
`data-lg-scroll-end`	Number	0	Viewport fraction used for the end boundary: `0` is the top of the viewport.
`data-lg-scroll-yoyo`	Boolean	false	If set, the animation reaches its end when the element gets to the viewport’s center and then moves back to it start.

Settings and interpolation

data-lg-scroll-start defaults to 1, and data-lg-scroll-end defaults to 0. Numeric inertia is clamped to 0–0.99; this plugin interpolates with 1 - inertia, so higher inertia is slower. CSS-only mode exposes --progress, --diff, and --abs-diff. Transform animation replaces the element’s inline transform rather than composing with other transform owners.

Try it

Open the full demo