Technical documentation / Ston Motion
Installation, how to use every widget, the global settings, performance and accessibility, and the developer hooks — the complete documentation for Ston Motion and Ston Motion Pro.
01 / At a glance
Award-grade motion without the usual weight.
Per widget
Scripts are registered, not enqueued: a page loads only the files of the widgets on it. Pages without a Ston Motion widget load nothing.
Self-hosted
Lenis and, in Pro, GSAP and its plugins ship inside the plugin. Nothing is fetched from a third party.
Free core
The twelve free widgets run on a small vanilla core with no animation library at all.
Accessible
When the visitor’s system asks for less motion, text and numbers appear at once, marquees stand still and pins are skipped.
Robust
Every step of the core is wrapped separately, so one failing widget never stops the others. Scroll animations re-measure when the page grows.
Extensible
Pro itself is built on the public hooks: add widgets, scripts, settings rows and reveal effects without patching.
02 / Install
Download from ston.ae/download/ston-motion, upload in Plugins → Add New → Upload and activate. Elementor (free) must be active.
In the Elementor panel, open the Ston Motion category. Every widget has its own icon.
Upload Ston Motion Pro next to the free plugin. It adds seven GSAP widgets and extra effects such as scramble text.
Copy the key from My Account → Licenses on ston.ae and paste it on the License screen under Ston Motion. Updates arrive in Dashboard → Updates.
03 / Tutorial / Basics
Drag a widget in. Content options are in the Content tab; colors, type and spacing in the Style tab — no custom CSS needed.
Scroll animations and pins are shown statically in the editor so editing stays easy. Use Preview to see the motion.
Ston Motion → Widgets: switch off what you do not use. Their files never load and they leave the Elementor panel.
Ston Motion → Settings: smooth scrolling (Lenis), smoothness, and in Pro the page-height re-measure.
04 / Tutorial / Free widgets
Key settings for each — the Style tab of every widget also has colors, typography and spacing.
Free
Text, split by character / word / line, reveal effect (fade, slide, scale, rotate, blur), stagger direction, easing, duration, play once.
Free
Text, highlighted text or image items, speed (px/sec), direction, pause on hover, fade edges.
Free
Start and end number, decimals, separator, prefix and suffix; count once on view or scrub with scroll between two points.
Free
Text and link, magnetic strength and activation radius, normal and hover styles.
Free
Dot or icon cursor, active on chosen CSS selectors, hide the default cursor, follow speed, active scale, blend mode.
Free
Label with optional link and tag, shape, dot with pulse, dot and ring colors, pulse duration — for eyebrows and status tags.
Free
Text before, rotating words, text after, effect, time per word, word on its own line.
Free
A row of tags with optional links, one-by-one entrance, normal and hover styles.
Free
Cards with icon, title, detail and a colored status badge with optional pulsing dot.
Free
Two nodes (text or icon) with captions, joined by a line with a travelling dot — back and forth, one way or still.
Free
Round icon button with spreading rings; link, accessible name, ripple color, duration and spread.
Free
Browser mockup of page blocks; locked and editable tags; a cursor is stopped by a locked block and rewrites an editable one.
05 / Tutorial / Pro widgets
Built on GSAP and ScrollTrigger, self-hosted inside Pro.
Pro
Sequence images scrubbed by scroll, scroll length, and a Scroll Narrative of text or Elementor templates entering and leaving at chosen percentages.
Pro
Pin a section and move through panels sideways: image, title, text and link per panel, panel size, overlay, scale on hover.
Pro
Draw strokes on scroll or morph one shape into another on hover, from the library, a file or SVG code.
Pro
A physics-based fan of cards: image, title, text, link, card size, fan angle, prev/next buttons.
Pro
Draggable snapping strip with eyebrow, counter (01/03), prev/next buttons and progress bar; several card types.
Pro
Big outlined words that show an image or play a video behind them on hover; videos load only on hover.
Pro
One figure rolling through several values with following pills, live tag and accessible description.
06 / Settings reference
Smooth scrolling
Use Lenis smooth scrolling on pages with a Ston Motion widget (on by default). Turn off if your theme already smooths scrolling.
Smoothness
How long the page glides after a wheel turn, 0.3 – 3 seconds (default 1.2).
Page height changes (Pro)
Re-measure scroll animations when the page grows; waits until scrolling stops and runs at most once a second (on by default).
Accessibility
Always on: reduced-motion visitors get static versions.
Widgets
Switch each widget on or off; switched-off widgets load nothing.
07 / Performance
Pages without a widget
Nothing from Ston Motion.
Free widgets
A small vanilla core plus the widget’s own file; Lenis only if smooth scrolling is on.
Pro widgets
GSAP, ScrollTrigger and only the GSAP plugins that widget needs (e.g. SplitText, Draggable).
Phones
Touch scrolling is normalised for pins; layouts stay responsive and RTL-aware.
Caching plugins
Works with WP Rocket. If you defer or delay JavaScript, keep ston-motion, gsap and lenis out of delay.
08 / Developer reference
ston_motion/widgets
filter — add or replace widgets (slug → file, class)
ston_motion/admin_widgets
filter — entries on the Widgets screen
ston_motion/register_scripts
action — register or swap script handles
ston_motion/split_text/reveal_effects
filter — add reveal effects to Split Text
ston_motion/settings_rows · ston_motion/save_settings
action · filter — add and save your own settings rows
ston_motion/admin_header · ston_motion/admin_help
actions — content on the admin screens
ston_motion/loaded
action — Ston Motion is ready
window.stonMotion
JS — onReady(), onElementReady() and requestRefresh() for your own scripts
09 / Troubleshooting
Animations do not run
Check that a caching plugin does not combine or delay ston-motion, gsap or lenis scripts.
Nothing moves in the editor
Expected for scroll animations and pins — use Preview.
Page jumps with smooth scrolling
Turn off Smooth scrolling if your theme or another plugin already smooths scrolling.
A widget is missing in Elementor
It is switched off in Ston Motion → Widgets, or it is a Pro widget and Pro is not active.
Motion is off for a visitor
Their system asks for reduced motion; Ston Motion respects it on purpose.
10 / Get it