01
Select the real content
Keep your existing Heading, Text Editor, Image or Button widget. Containers have their own layout controls.
Elementor Motion / Built for your existing content
GSAP Motion Builder for Elementor 4.
headingswordsbuttonscontainers
Use the content and layout you already have. Start with an editable preset or compose a timeline, choose the trigger and preview the result where you build.
- Character to layout container
- 251 editable presets
- 20 page layouts
- Native editor preview
01 / Where it lives
Open the content you already use.
Open a supported widget field or container. Motion stays beside the content you are editing.
02
Choose the motion and its moment
Enable GSAP Motion, select a compatible preset and set when it runs. Preview the assignment without leaving your editor.
02 / Contextual targeting
Choose the part that should move.
Text, rich content and containers need different choices. Target the whole field or a supported part inside it.
Explore supported targets ↗01
Start with the selected field
Use the complete field, or select matching links and inline content inside compatible text.
02
Go from whole text to individual words
Choose Elements, Lines, Words or Characters for compatible text. Keep the original field intact while controlling how its text participates.
The choices follow your content
Heading text
Whole text, lines, words or characters.
Text Editor
Matching headings, paragraphs, lists and links.
Buttons & images
Content targets inside the widget.
Widget collections
Supported collections such as Icon List.
Containers
The container or its direct children.
Navigation
Supported links, items and submenus.
03 / Reusable motion
Start with a preset. Keep complete control.
73 built-in presets, plus 178 additional presets to browse and import. Find a starting point, preview it and make it your own.
Browse the Preset Library ↗01
Find your starting point
Browse by content and motion type. The library separates the motion you create from the places you apply it.
02
Narrow the library
Search by name or purpose to find relevant motion without looking through every preset.
03
Preview before applying
Replay the preset on content-specific sample data. Then judge its assignment on the actual content in your editor.
04
Edit or create your own
Built-in presets are editable. Save a variation, update a shared preset or restore its original settings.
04 / Timeline composition
Build the motion. Compose the sequence.
Choose the structure that fits the job. Set properties, timing and easing, then replay the result while you build.
Explore timeline creation ↗01
Simple Motion
Define one focused animation with starting and ending properties, duration and easing.
02
Staged Motion
Give a supported parent and its children separate phases. Introduce a container, then sequence its contents.
03
Advanced Timeline
Arrange up to ten steps with independent properties, timing, easing and positions. Overlap steps or leave space between them.
04
Refine the composition
Adjust duration, delay, easing, repeat and yoyo for a step. Use its timeline position to control when it starts relative to the rest of the sequence.
05 / Trigger behavior
Choose the moment without rebuilding the motion.
The preset defines the animation. Each assignment chooses its target and the event that starts or controls it.
Explore trigger settings ↗01
Start with an event
Choose Page load, Scroll into view, Viewport leave, Hover, Click or Focus. Compatible choices follow the preset and target.
02
Control scrolling and interaction
Scroll scrub links progress to scrolling. Pointer controls follow the element or viewport. Custom event listens for a named event from your site or an integration.
03
Give one layer more than one moment
There are ten trigger types and up to ten trigger records. Each placement keeps its own event settings without duplicating the preset.
06 / Editor to frontend
Preview where you build. Check it where it runs.
Library previews help you choose. Editor previews show the assignment on your own content. Save and check the published page to judge scrolling and interactions in context.
View a live page example ↗01
Preview the assignment
Check the preset, target and trigger on the content you are editing. Refine the timing before publishing.
02
Review the finished page
Check the actual published result after saving. A screenshot shows the finished state; open a live page to experience motion.
07 / Build once, assign again
A preset stays useful beyond its first placement.
Keep the animation. Change its compatible target and trigger. Update the shared preset to change every use, or save a separate variation when one placement needs a different result.
Elementor MotionCreate once, reuse on compatible content
- Your opening headingAssign a text preset on Page load.
- A heading further down the pageUse the same preset with Scroll into view.
- Another Elementor Motion installationExport and import your preset for another project using the same product.
08 / Complete page proof
See motion across a complete page.
Explore 20 layouts built for your editor. Import the native page and its required presets, then change the content and inspect its assignments.
Browse every page layout ↗01
Creative Director
A portfolio page with editable text, imagery and motion assignments. Open the live page to see the full composition.
02
Interior Designer
A service-business page you can adapt to a new project. Keep the native structure and refine the motion as the content changes.
09 / A separate navigation system
Carry the experience into the next page.
Page transitions have their own presets, route rules and preview. They use native same-site navigation, separately from GSAP motion inside the page.
Explore page transitions ↗01
Choose a transition
Start with a document-level transition preset. Keep page navigation separate from your reusable element animations.
02
Define where it applies
Set defaults or ordered rules for selected pages and routes. Use exceptions when a page should behave differently.
03
Preview the effect
Replay the exit and entry effect, then verify your chosen routes on the published site. Unsupported browsers continue with normal navigation.
Your next step
Experience the editor before you choose.
Open a private, one-hour workspace. Edit the example page, select a preset and preview its assignment. Shared presets and site settings stay read-only in the trial.
You have seen the workflow
Keep your content.
Make the motion yours.
Reusable presets, visual timelines and contextual controls. Choose Solo for one site or Agency for client work, with yearly or lifetime access.