Abuja Digital Studio · Est. 2018
Start a Project
DocsOrravo FXGetting started
Getting Started

Getting started

Orravo FXorravo.com/docs/orravo-fx/getting-started

First animation in 30 seconds

Add a data attribute to any element:

html<h2 data-orv-fx="scroll-reveal">Hello kinetic web</h2>

Reload the front end. The element fades and slides in as it enters the viewport.

The handle orv-fx is registered at wp_enqueue_scripts priority 11. Orravo FX deregisters any duplicate orv-fx handle the theme tries to register, so the plugin's copy always wins.

Admin tabs

Open Orravo FX in the sidebar.

TabPurpose
OverviewQuick stats, diagnostic, doc snippets
ModulesEnable/disable individual modules, view snippet examples
MarketplaceBrowse 3rd-party-registered modules
MigrateTools to migrate from competing motion libs
ActivityRecent events from the activity log
SettingsLoading strategy, reduced-motion override, conditional load, CSP

Module shape

Every module is a data-orv-fx="<key>" attribute (or data-orv-mag for magnetic-cursor) plus optional configuration attributes:

html<section data-orv-fx="sticky-media">
  <img data-orv-stk-target src="a.jpg">
  <div data-orv-stk-img="b.jpg">Panel one</div>
  <div data-orv-stk-img="c.jpg">Panel two</div>
</section>

The engine boots once per page, finds matching elements, and wires them up.

Getting started · Orravo FX Docs | Orravo