Menu

Scroll Observer

The scrollObserver plugin allows you to create powerful, scroll-based animations.
You can trigger, synchronize, or pin animations based on the user's scroll position.


Important: You must first import the plugin before using it.

import { scrollObserver } from 'animatry'

Basic Example

The most common use case is triggering an animation when an element enters or exits the viewport (or any other area).


Show development markers:


scrollObserver({
  animation: animatry.to('.red', {
    x: maxWidth,
  }),
  trigger: '.red',
  start: 'center center+100',
  end: 'center center-100',
  dev: false,
  onBottomIn: 'restart',
  onTopIn: 'complete reverse',
})

Steered Animations

You can also synchronize an animation's progress with the scroll position for a smoother, continuous effect.


Show development markers:


scrollObserver({
  animation: animatry.to('.red', {
    x: maxWidth,
  }),
  trigger: '.red',
  start: 'top center+100',
  end: 'bottom center-100',
  dev: false,
  steer: true,
  steerDuration: .5, // time to "catch up"
})

Pinning

You can pin any element while the scroll observer is active. It works seamlessly with your animation and layout.


Show development markers:


scrollObserver({
  animation: animatry.to('.red', {
    scale: 1.5,
    rotate: 90,
  }),
  trigger: '.red',
  start: 'top center',
  end: 'bottom center',
  pin: true,
  dev: false,
})

Configuration Options

Property
Description
animation
The animation to control (tween or timeline created by animatry).
context
The DOM element context for internal calculations.
trigger
The element that triggers the animation when entering or leaving the viewport.
endTrigger
An optional second element that defines when the scroll effect should end.
start
The starting point for the animation, can be a string (like "top center") or a number.
end
The ending point for the animation, can be a string or number.
steer
If true, the scroll position directly controls the animation progress.
steerDuration
The time (in seconds) used to steer the animation smoothly.
pin
Pins the trigger element during the scroll (can also be a selector).
pinSpacing
Determines if additional space is added when pinning an element.
pinWrapper
Optional selector for a custom wrapper used during pinning.
pinContent
Optional selector for custom content within the pinned element.
resize
If true, automatically refreshes scrollObserver when the window size changes.
dev
Enables development markers (debugging mode) or allows detailed dev options.
onBottomIn
Callback or keyword string executed when the bottom of the element enters the viewport.
onTopIn
Callback or keyword string executed when the top of the element enters the viewport.
onBottomOut
Callback or keyword string executed when the bottom of the element leaves the viewport.
onTopOut
Callback or keyword string executed when the top of the element leaves the viewport.
onEnter
Callback or keyword when the trigger area enters the viewport.
onLeave
Callback or keyword when the trigger area leaves the viewport.
onUpdate
Callback executed on every scroll update while the observer is active.