Quick Start

Upload the Etch Motion plugin ZIP file via Plugins → Add New → Upload Plugin in your WordPress admin. Activate the plugin. No configuration needed to get started. Etch Motion works with or without the Etch page builder. With Etch, you get the full builder panel integration. Without Etch, you add animations via HTML attributes.

The fastest way to add an animation is with two HTML attributes on any element. Open any page in the Etch builder (or your preferred editor), select the element you want to animate, add the attributes shown below, then save and preview. The element will fade in and slide up when it scrolls into the viewport.

data-etch-motion="fade-up"
data-etch-motion-trigger="scroll"

Override the default duration, delay, and easing with additional attributes. Duration and delay are in seconds. Easing controls the acceleration curve — power2.out is smooth deceleration, power3.out is more dramatic, back.out adds a slight bounce overshoot.

data-etch-motion="fade-up"
data-etch-motion-trigger="scroll"
data-etch-motion-duration="1.2"
data-etch-motion-delay="0.3"
data-etch-motion-ease="power3.out"

Etch Motion only loads GSAP on pages that contain animated elements. If a page has no data-etch-motion attributes, zero additional JavaScript is loaded. The plugin scans your page content and conditionally enqueues only the GSAP modules required. A page with only fade-up loads GSAP core + ScrollTrigger. A page with text animations also loads SplitText. A page with no animations loads nothing.

Now that your first animation is working, explore the Preset Reference for all 61 presets, the Attribute Reference for every configurable option, or the Entrance & Exit Guide for a deep dive into the 28 entrance presets.