Page Load

Create stunning animations that activate during or after the page has fully loaded.

This trigger is the simplest among all, yet it remains incredibly powerful. It's particularly effective for above the fold or entrance animations, providing a visually striking introduction to your website that can immediately engage your visitors. Before Load refers to a window event known as DOMContentLoaded. The timelines will start as soon as the initial structure of the Document Object Model (DOM) elements is laid out. This means that animations can begin even before all the content on the page, such as images or stylesheets, has fully loaded, providing a more immediate and dynamic user experience.

After Load refers to a window event known as the load event. The timelines will start after the entire page has fully loaded, including all dependent resources such as stylesheets and images. This ensures that animations begin only when all elements are completely ready, providing a seamless and uninterrupted user experience.

Load the timeline paused

This option allows you to initially load your animations in a paused state. This means that the animations will not start playing immediately upon page load, but will instead wait for a specific trigger or user interaction. This feature provides you with greater control over when and how your animations are displayed, allowing you to create a more tailored user experience. You can access the timeline object by copying the timeline's Unique Identifier (UID), which follows the format _mp_XYZ, where XYZ is a unique timestamp number.

To execute the timeline, you can invoke the play method on the timeline object from your code. For instance, if your timeline's UID is _mp_XYZ, you would call _mp_XYZ.play() to start the animation.

Starting from version 2.1.0, all Page Load and Page Exit timelines are now wrapped with a GSAP context, which can be accessed using the variable _mp_XYZ_CTX.

Play the timeline in a loop

This option allows you to set your animations to repeat continuously. This means that once the animation sequence reaches its end, it will automatically start over from the beginning, creating a continuous loop of motion.