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.

A Brief Look

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. First, let's take a look at the options which come with Presentation Mode, and below we will talk you through how to getting set up!

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

Getting Started with Presentation Mode

Getting started with the Presentation Mode is extremely simple! Follow the easy steps below and you'll be on your way to having full page browsing experience in no time! In this walkthrough, we will be using Bricks Builder, but this will work in any page builder so long as the markup is the same.

The Basic Structure

1. Start by creating a wrapper element and placing your content containers inside it. In this example, we'll use three containers to represent the full-page sections of your presentation.

2. Assign the same class to each container, as this will be the selector used within Motion.page's Presentation Mode. For consistency, we'll use the class name .p-c (short for presentation-container).

3. Each container should be set to occupy the full width and height of the viewport. Apply these styles directly to the .p-c class.

4. To differentiate each container visually, you can apply unique background images on their IDs, rather than applying them to the shared class.

5. Finally, ensure the wrapper is set to position: relative;, while each container is set to position: absolute;. This allows the containers to overlap within the wrapper.

Motion.page Settings

1. Make sure to select your page from the dropdown at the top left.

2. Under "Trigger" - select Observer from the list.

3. In order to make use of the Presentation mode, make sure to toggle the "Trigger each iteration individually" on. Then, you will have the option to toggle on "Presentation mode". There will also be an optional toggle for "Infinite repeat". In our example, we will toggle this on.

4. Now, let's go ahead and add the .p-c class to the target selector field.

5. Next, let's go ahead and choose Vertical for the direction. You can also select Horizontal here. Note: if you choose Horizontal and use a mouse, make sire to also select the "Trigger on vertical scroll" toggle.

6. You can play around with the transition duration and gesture cooldown to suit your needs. We will now go ahead and select the "Wheel" interaction type. You can also select Scroll depending on your needs.

7. The last thing we need to do is to set an Animation Selector under the Animation section. If you have no elements inside your sections, you can just simply select the same class of .p-c. Otherwise, if you have elements that you would like to animate, feel free to select their classes here and apply the animations as you wish.

Here is an example of our setup for your convenience:

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.