01
Select the real content
Use an existing Heading, Paragraph, Button or layout block. Blocks inside a pattern can have their own assignments.
Gutenberg Motion / Built for your existing content
GSAP Motion Builder for Gutenberg.
headingswordsbuttonsgroups
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.
Select a supported block. Motion opens in the block inspector, alongside the controls you already know.
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.
A heading, list and group are different structures. The available targets follow the block you selected.
Explore supported targets ↗01
Start with the selected block
Keep the original content intact. A whole-field assignment moves the selected text; inline targets narrow the selection where supported.
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
Headings & paragraphs
Whole text, lines, words or characters.
Lists & list items
A collection or an individual item.
Buttons & button groups
One action or its existing group.
Images & galleries
Media targets and image collections.
Groups & columns
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.
Gutenberg 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 Gutenberg 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.