How drsmok3y/hoversync-reflect-hover-effects-on-elementor works
HoverSync Pro is a WordPress/Elementor plugin for configuring interactions in the editor and synchronizing animations across otherwise unrelated page elements. The documented workflow runs from Elementor controls to a rendered configuration payload, then the frontend engine responds to hover, click, or viewport events and animates matching targets. Editor AJAX also supports saving, loading, and deleting effect records. The README describes additional stacking, responsive, and scroll-reversal capabilities; source excerpts are partial, so links for those features are limited to documented components rather than inferred internals. The database excerpt implements a custom table, despite the README’s post-meta description.
Main entry points: class-renderer.php Asset Renderer · hoversync-elementor-hover-effects.php Plugin Bootstrap · frontend.js Frontend Engine · class-controls.php Interaction Controls
Components 18
Plugin Setup
- Plugin Bootstrap
hoversync-elementor-hover-effects.php
Editor Authoring
- Interaction Controls
includes/class-controls.php - Editor Sync UI
assets/js/editor.js - AJAX Handler
includes/class-ajax-handler.php - Effect Records
includes/class-database.php - Engine Settings
includes/class-settings.php - Editor Styles
assets/css/editor.css
Page Rendering
- Asset Renderer
includes/class-renderer.php - Widget Config
includes/class-controls.php
Interaction Runtime
- Frontend Engine
assets/js/frontend.js - Frontend Styles
assets/css/frontend.css
Other components
- Site Editor
- Elementor
- GSAP CDN
- Rendered Page
- Trigger Widget
- Target Widgets
- WordPress AJAX
Connections 23
- Site Editor → Elementor: authors in
- Plugin Bootstrap → Interaction Controls: initializes
- Plugin Bootstrap → Asset Renderer: initializes
- Plugin Bootstrap → AJAX Handler: initializes
- Plugin Bootstrap → Effect Records: initializes
- Plugin Bootstrap → Engine Settings: initializes
- Elementor → Interaction Controls: hosts controls
- Interaction Controls → Widget Config: renders config
- Editor Sync UI → WordPress AJAX: sends requests
- WordPress AJAX → AJAX Handler: dispatches
- AJAX Handler → Effect Records: reads and writes
- Asset Renderer → Frontend Engine: enqueues
- Asset Renderer → Frontend Styles: enqueues
- Asset Renderer → Editor Sync UI: enqueues
- Asset Renderer → Editor Styles: enqueues
- Asset Renderer → GSAP CDN: loads dependency
- Asset Renderer → Rendered Page: enqueues assets
- Widget Config → Rendered Page: adds widget data
- Rendered Page → Frontend Engine: provides config
- Frontend Engine → Trigger Widget: listens for events
- Frontend Engine → Target Widgets: animates matches
- Frontend Engine → GSAP CDN: uses animation engine
- Engine Settings → Site Editor: presents options