← All pluginsScore a page.
Score a page.
Everything motion,
Click around.
What you get
Clean public API.
Free.
Stop bolting GSAP onto every site.
Get Orravo FX free↗
Live · v3.0.0 · Free
Orravo FX
GPU-first animation and interaction primitives for any WordPress site. Scroll-reveal, parallax, sticky-media scrollytelling, count-up, marquee, magnetic-cursor, tilt, image-compare, lazy Lottie, plus 13 more. Vanilla JS, around 8KB gzipped, IntersectionObserver and rAF-throttled, prefers-reduced-motion aware. Every module enables and disables individually from the admin.
0Built-in modules
0Engine bundle (gzip)
0External dependencies
$0Forever
// Feature preview
Score a page.
See its motion budget.
This is a UI simulation of the Orravo FX page audit inside the WP admin. Type any page slug to see how many primitives load, whether reduced-motion is being honoured, the on-page bundle size, and the per-frame FPS impact.
Score a page.
Read the motion budget.
Simulated demo. Runs automatically as you scroll. The real plugin walks the DOM and reports against the engine instance.
Demo simulation
FX primitives loaded·awaiting scan
Reduced motion check·awaiting scan
Bundle size on this page·awaiting scan
FPS impact on scroll·awaiting scan
// What it does
Everything motion,
nothing extra.
22 built-in modules across 7 packs. One vanilla-JS engine. IntersectionObserver, rAF, GPU transforms. Pauses when off-screen, falls back when reduced-motion is requested.
// 22 modules · 7 packs · ~8KB gzip · 0 dependencies
✓Scroll Reveal (fade + slide on viewport entry)
✓Reveal Blur (frosted-glass drop variant)
✓Parallax Layers (multi-speed in container)
✓Sticky Media (Apple-style scrollytelling)
✓Marquee (infinite scrolling strip)
✓Rich Marquee (edge-fade + auto-clone)
✓Count Up (numeric animation, suffixes preserved)
✓Magnetic Cursor (drift toward pointer)
✓Image Compare (before/after slider, keyboard-accessible)
✓Lazy Lottie (lazy lottie-web from CDN, on-scroll)
✓Tilt (3D card tilt on pointer)
✓Text Split (per-word or per-letter reveal)
✓SVG Line Draw (stroke-dasharray on scroll)
✓Cursor Trail (eased dot inside element)
✓Confetti Burst (DOM particles on click or scroll)
✓Kinetic Typography (viewport-position scaled)
✓Section Anchors (smooth-scroll with header offset)
✓Page Transitions (View Transitions API + fallback)
✓Focus Trail (traveling outline for keyboard focus)
✓Text Shimmer (background-clip highlight loop)
✓Particles Background (canvas field, pauses off-screen)
✓Hover Glow (cursor-following spotlight gradient)
✓Text Cycle (rotates child elements with fade)
✓7 packs: reveal, pointer, type, background, navigation, decoration, utility
✓Per-module enable / disable in the admin
✓Per-pack enable / disable in the admin
✓reduced_motion_override: auto / on / off
✓Loading strategy: monolithic or per-module
✓Conditional load (only pages that use it)
✓CSP-strict mode (no inline injection)
✓WP-CLI commands (orv-fx audit, orv-fx modules)
✓REST API for engine + module config
// Explore the product
Click around.
It's all real.
Six interactive previews of the actual Orravo FX modules. No screenshots; these are working mock-ups of what ships in the plugin.
data-orv-fxscroll-reveal
120msDefault stagger
IOIntersectionObserver
0.6KBModule size
Configured attributesmodule
| Attribute | Type | Default | Notes |
|---|---|---|---|
| data-orv-fx | trigger | scroll-reveal | required |
| data-orv-sr-stagger | number | 0 | per-child delay multiplier |
| data-orv-sr-distance | px | 32 | slide distance |
| data-orv-sr-duration | ms | 700 | animation duration |
Layer speeds (vh per scroll)3 layers
| Background image | img | data-orv-px-speed="-30" |
| Mid layer | img | data-orv-px-speed="15" |
| Headline | h1 | data-orv-px-speed="35" |
Sticky Media (sister module)scrollytelling
| data-orv-stk-target | slot | pinned media element |
| data-orv-stk-img | url | image to swap on entry |
98%Uptime
14,820Clicks tracked
$2.4MRevenue
1,200msDefault duration
Configured attributesmodule
| Attribute | Type | Default | Notes |
|---|---|---|---|
| data-orv-cu-to | string | required | final value, suffix preserved |
| data-orv-cu-dur | ms | 1200 | animation duration |
| data-orv-cu-easing | enum | out-cubic | linear / out-cubic / out-expo |
Track 1: textA simple horizontal track of strings. Cloned automatically to fill the viewport.
Track 2: logosSame trigger, image children. Use rich-marquee for an edge-fade mask + auto-cloning behaviour.
Pauses on hoveranimation-play-state: paused on :hover and :focus-within. No JS required.
Reduced motionMarquee fully suppressed when prefers-reduced-motion is requested. Track stays static.
Magnetic Cursordata-orv-mag
| data-orv-mag | trigger | opt-in attribute |
| data-orv-mag-strength | number | 0 to 1, default 0.3 |
Tiltdata-orv-fx="tilt"
| data-orv-tilt-max | deg | max rotation, default 12 |
| data-orv-tilt-persp | px | perspective, default 800 |
orv-fx-icContainer class
DragPointer + keyboard
0.9KBModule size
WCAG 2.1AA-compliant
Required structuremarkup
| .orv-fx-ic | root | data-orv-fx="image-compare" |
| .orv-fx-ic__before | layer | before image wrapper |
| .orv-fx-ic__after | layer | after image wrapper |
| .orv-fx-ic__handle | handle | draggable divider |
// Compare
What you get
vs. what they sell you.
ScrollMagic, GSAP ScrollTrigger, AOS, and WOW.js cover slices of this surface area. Most ship behind a paid pro tier or require a large runtime. Orravo FX covers the same primitives in one open install.
| ScrollMagic | GSAP+ScrollTrigger | AOS / WOW.js | Orravo FX | |
|---|---|---|---|---|
| Vanilla JS, no jQuery, no framework | no | no | no | Built in |
| Bundle size (gzipped) | ~8KB | ~85KB GSAP | ~14KB AOS | ~3KB WOW |
| Total runtime dependencies | GSAP | GSAP | none | animate.css |
| Scroll-reveal with stagger | ✓ | ✓ | ✓ | Built in |
| Multi-speed parallax layers | paid plugin | ✓ | no | Built in |
| Sticky-media scrollytelling | pro tier | ✓ | no | Built in |
| Count-up numeric animation | no | no | no | Built in |
| Marquee + rich-marquee tracks | no | no | no | Built in |
| Magnetic cursor on hover | no | no | no | Built in |
| 3D pointer-tracked tilt | no | no | no | Built in |
| Image compare slider | paid plugin | no | no | Built in |
| Lazy Lottie loader (CDN, on scroll) | no | no | no | Built in |
| Text split per word or letter | pro tier | ✓ | no | Built in |
| SVG line-draw on scroll | pro tier | ✓ | no | Built in |
| Cursor trail + hover glow | no | no | no | Built in |
| Confetti burst on click or scroll | no | no | no | Built in |
| Particles canvas background | no | no | no | Built in |
| View Transitions API page fade | no | no | no | Built in |
| prefers-reduced-motion respected | partial | ✓ | partial | Built in |
| IntersectionObserver, no scroll listeners | partial | ✓ | partial | Built in |
| rAF-throttled, GPU-friendly transforms | ✓ | ✓ | partial | Built in |
| Pauses when off-screen / tab hidden | no | ✓ | no | Built in |
| Engine custom events for instrumentation | no | partial | no | Built in |
| Per-module enable / disable toggle | no | no | no | Built in |
| Per-pack toggle (reveal, pointer, etc.) | no | no | no | Built in |
| CSP-strict mode (no inline scripts) | no | no | no | Built in |
| Conditional load (only pages that use it) | no | no | no | Built in |
| WP-CLI commands for module audits | no | no | no | Built in |
| REST API for engine + module config | no | no | no | Built in |
| Pricing model | Free + paid pro | $99 GreenSock biz | Free | Free forever |
// Built like real software
Clean public API.
Read the source.
Every module is a single data attribute. The engine emits custom events you can hook for analytics, error reporting, or test instrumentation. Helper functions are exposed on window.OrvFX.
<!-- Scroll Reveal: fades and slides into view as the element enters the viewport. --> <div data-orv-fx="scroll-reveal" data-orv-sr-stagger="2"> <h2>Quietly amazing</h2> <p>Each child fades in 120ms after the previous one.</p> <a href="/cta">Read the case study</a> </div> <!-- Reveal Blur: same trigger, frosted-glass drop. Use sparingly. --> <h1 data-orv-fx="reveal-blur">Hero appears from a blur</h1>
// Pricing
Free.
Forever.
Orravo FX is fully open and free. Every module, every pack, every admin toggle unlocked.
// free
Orravo FX.
All modules. Unlimited sites. No license key.
$0
free forever
- Unlimited sites
- 22 built-in modules across 7 packs
- Per-module + per-pack admin toggles
- WP-CLI commands + REST API for engine config
prefers-reduced-motionaware out of the box
// Common questions
Asked & answered.
What is Orravo FX, exactly? +
A vanilla-JS animation engine for WordPress. You drop a data attribute on a tag, the engine wires up the right behaviour. There are 22 built-in modules across reveal, pointer, type, background, navigation, decoration, and utility categories. The whole engine is around 8KB gzipped (lite build) or 14KB (full build). No jQuery, no React, no GSAP.
How do I actually use it on a page? +
Activate the plugin, then add data-orv-fx="<module>" to any element. For example: <div data-orv-fx="scroll-reveal">…</div> reveals as it enters the viewport. <h2 data-orv-fx="text-split" data-orv-ts-by="word">…</h2> wraps each word in a span and reveals them with a stagger. Each module ships with its own data-* attributes for tuning; the docs list every one.
Does it respect prefers-reduced-motion? +
Yes. The engine reads the OS-level setting on boot. When reduced-motion is requested, modules either skip animation entirely (parallax, marquee, particles) or fall back to a fade-only path (scroll-reveal, text-split). You can override per site in the admin: Settings → reduced_motion_override = "auto" | "force-on" | "force-off". WCAG 2.1 AAA compliant by default.
Is this another GSAP / ScrollMagic wrapper? +
No. It is a standalone engine. Every module is hand-written vanilla JS using IntersectionObserver, requestAnimationFrame, and CSS transforms. No GSAP, no anime.js, no third-party animation libraries. The only optional external dependency is lottie-web, and that is lazy-loaded from a CDN only when a [data-orv-fx="lottie"] element scrolls into view.
Can I disable modules I don't use? +
Yes. The admin Modules tab lists every registered module with a per-module toggle. Pack-level toggles (reveal pack, pointer pack, type pack, etc.) disable a whole category at once. Disabled modules are not even shipped in the engine bundle when conditional_load is on. Loading strategy can be set to "monolithic" (one engine.js) or per-module (each module is its own lazy chunk).
What happens on a CSP-strict site? +
Set csp_strict = true in Settings. The engine then refuses to inject inline styles or scripts; everything goes through the enqueued stylesheet and the engine bundle. Page Transitions module also degrades gracefully on CSP-strict pages where the View Transitions API would otherwise need a small inline shim.