back

Scroll animation

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-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.

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%.

(more coming…)

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 null The preset animation to use.
data-lg-scroll-animate String null 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-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.