Observer

Observer, introduced in version 2.3, is a powerful and flexible way to detect and respond to user interactions across all input types; mouse, touch, pointer, scroll, wheel, drag—without needing to handle each individually.

Whether it’s a swipe, scroll, or drag, GSAP’s Observer normalizes it all and gives you access to directional data, velocity, and custom gestures—making interaction-based animations buttery smooth and incredibly precise.

As seen in the UI:

Target Selector: Choose the element to observe. Defaults to window for global gesture tracking.

Interaction Types: Choose from Pointer, Touch, Wheel, or Scroll input types.

Callbacks: Assign animation triggers to specific gestures such as:

• onUp
• onDown
• onPress
• onRelease
• …and more!

Presentation Mode

To enable Presentation mode, make sure you have the "Trigger each iteration individually" option enabled.

Presentation Mode transforms your site into a full-page scrolling experience, similar to what you might find with libraries like fullPage.js.

But unlike generic solutions, this feature is fully custom-built by the Motion.page team, designed from the ground up in response to user feedback requesting a smoother, more flexible scroll-snapping experience.

It enables you to:

• Snap between sections with clean, scroll-triggered transitions
• Apply visual effects like fading and sliding
• Control navigation direction, speed, and gesture cooldown
• Create immersive, app-like interfaces with minimal setup

🔧 Behind the scenes, Motion.page handles all the gesture tracking, animation callbacks, and layout coordination—so you don’t have to.

If you’re building section-based websites or interactive presentations, Presentation Mode is the powerful, user-friendly solution you’ve been waiting for.

Infinite Repeat

Enable this toggle to loop through sections endlessly—perfect for immersive, continuous navigation experiences.

Direction

Choose how users navigate:

• Vertical (default)
• Horizontal

Effects

Customize the transition animations between sections:

• Opacity: Fade in/out between sections
• Translate: Slide transition
• Both: Combine fade and slide for smooth, dynamic transitions

Transition Duration

Controls how long each section transition lasts (in seconds).

Gesture Cooldown

Sets the minimum time between gesture-based section transitions. Helps prevent unintentional rapid transitions (e.g. from sensitive trackpads).

Iteration Types

You can choose from four interaction types: Pointer, Touch, Wheel or Scroll, and then in the Callbacks section, choose which gesture events to respond to. Each callback can trigger different animation actions. Callbacks range from onUp, onDown, onPress, onRelease, and many more!

Properties

Depending on your interaction type, you can then change its properties, ranging from Tolerance, Drag Minimum, Wheel Spin, Scroll Speed.

Tailor the gesture experience depending on interaction type:

Advanced Toggles

• Prevent Default: Stops default browser behavior for gestures. Recommended for full-page scroll experiences.
• Lock Axis: Locks the gesture to its initial axis (vertical or horizontal). Prevents accidental diagonal scrolling/swiping.