# drsmok3y/hoversync-reflect-hover-effects-on-elementor architecture

> Architecture diagram of the GitHub repository drsmok3y/hoversync-reflect-hover-effects-on-elementor, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-09-26). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/drsmok3y/hoversync-reflect-hover-effects-on-elementor
- Repository: https://github.com/drsmok3y/hoversync-reflect-hover-effects-on-elementor

## Overview

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: [`includes/class-renderer.php`](https://github.com/drsmok3y/hoversync-reflect-hover-effects-on-elementor/blob/version1.2.0/includes/class-renderer.php) (Asset Renderer), [`hoversync-elementor-hover-effects.php`](https://github.com/drsmok3y/hoversync-reflect-hover-effects-on-elementor/blob/version1.2.0/hoversync-elementor-hover-effects.php) (Plugin Bootstrap), [`assets/js/frontend.js`](https://github.com/drsmok3y/hoversync-reflect-hover-effects-on-elementor/blob/version1.2.0/assets/js/frontend.js) (Frontend Engine), [`includes/class-controls.php`](https://github.com/drsmok3y/hoversync-reflect-hover-effects-on-elementor/blob/version1.2.0/includes/class-controls.php) (Interaction Controls)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_setup["Plugin Setup"]
  node_plugin["Plugin Bootstrap"]
end

subgraph group_authoring["Editor Authoring"]
  node_controls["Interaction Controls<br/>[class-controls.php]"]
  node_editorjs["Editor Sync UI<br/>[editor.js]"]
  node_ajax["AJAX Handler"]
  node_database[("Effect Records<br/>[class-database.php]")]
  node_settings["Engine Settings<br/>[class-settings.php]"]
  node_editorstyles["Editor Styles<br/>[editor.css]"]
end

subgraph group_rendering["Page Rendering"]
  node_renderer["Asset Renderer<br/>[class-renderer.php]"]
  node_payload["Widget Config<br/>[class-controls.php]"]
end

subgraph group_runtime["Interaction Runtime"]
  node_frontend["Frontend Engine<br/>[frontend.js]"]
  node_styles["Frontend Styles<br/>[frontend.css]"]
end

node_admin(("Site Editor"))
node_elementor["Elementor"]
node_gsap["GSAP CDN"]
node_page["Rendered Page"]
node_trigger["Trigger Widget"]
node_targets["Target Widgets"]
node_wordpress["WordPress AJAX"]

node_admin -->|"authors in"| node_elementor
node_plugin -->|"initializes"| node_controls
node_plugin -->|"initializes"| node_renderer
node_plugin -->|"initializes"| node_ajax
node_plugin -->|"initializes"| node_database
node_plugin -->|"initializes"| node_settings
node_elementor -->|"hosts controls"| node_controls
node_controls -->|"renders config"| node_payload
node_editorjs -->|"sends requests"| node_wordpress
node_wordpress -->|"dispatches"| node_ajax
node_ajax -->|"reads and writes"| node_database
node_renderer -->|"enqueues"| node_frontend
node_renderer -->|"enqueues"| node_styles
node_renderer -->|"enqueues"| node_editorjs
node_renderer -->|"enqueues"| node_editorstyles
node_renderer -.->|"loads dependency"| node_gsap
node_renderer -->|"enqueues assets"| node_page
node_payload -->|"adds widget data"| node_page
node_page -->|"provides config"| node_frontend
node_frontend -->|"listens for events"| node_trigger
node_frontend -->|"animates matches"| node_targets
node_frontend -.->|"uses animation engine"| node_gsap
node_settings -->|"presents options"| node_admin

click node_plugin "https://github.com/drsmok3y/hoversync-reflect-hover-effects-on-elementor/blob/version1.2.0/hoversync-elementor-hover-effects.php"
click node_controls "https://github.com/drsmok3y/hoversync-reflect-hover-effects-on-elementor/blob/version1.2.0/includes/class-controls.php"
click node_editorjs "https://github.com/drsmok3y/hoversync-reflect-hover-effects-on-elementor/blob/version1.2.0/assets/js/editor.js"
click node_ajax "https://github.com/drsmok3y/hoversync-reflect-hover-effects-on-elementor/blob/version1.2.0/includes/class-ajax-handler.php"
click node_database "https://github.com/drsmok3y/hoversync-reflect-hover-effects-on-elementor/blob/version1.2.0/includes/class-database.php"
click node_settings "https://github.com/drsmok3y/hoversync-reflect-hover-effects-on-elementor/blob/version1.2.0/includes/class-settings.php"
click node_renderer "https://github.com/drsmok3y/hoversync-reflect-hover-effects-on-elementor/blob/version1.2.0/includes/class-renderer.php"
click node_payload "https://github.com/drsmok3y/hoversync-reflect-hover-effects-on-elementor/blob/version1.2.0/includes/class-controls.php"
click node_frontend "https://github.com/drsmok3y/hoversync-reflect-hover-effects-on-elementor/blob/version1.2.0/assets/js/frontend.js"
click node_styles "https://github.com/drsmok3y/hoversync-reflect-hover-effects-on-elementor/blob/version1.2.0/assets/css/frontend.css"
click node_editorstyles "https://github.com/drsmok3y/hoversync-reflect-hover-effects-on-elementor/blob/version1.2.0/assets/css/editor.css"

classDef toneNeutral fill:#f8fafc,stroke:#334155,stroke-width:1.5px,color:#0f172a
classDef toneBlue fill:#dbeafe,stroke:#2563eb,stroke-width:1.5px,color:#172554
classDef toneAmber fill:#fef3c7,stroke:#d97706,stroke-width:1.5px,color:#78350f
classDef toneMint fill:#dcfce7,stroke:#16a34a,stroke-width:1.5px,color:#14532d
classDef toneRose fill:#ffe4e6,stroke:#e11d48,stroke-width:1.5px,color:#881337
classDef toneIndigo fill:#e0e7ff,stroke:#4f46e5,stroke-width:1.5px,color:#312e81
classDef toneTeal fill:#ccfbf1,stroke:#0f766e,stroke-width:1.5px,color:#134e4a
class node_plugin toneBlue
class node_controls,node_editorjs,node_ajax,node_database,node_settings,node_editorstyles toneAmber
class node_renderer,node_payload toneMint
class node_frontend,node_styles toneRose
class node_admin,node_elementor,node_gsap,node_page,node_trigger,node_targets,node_wordpress toneIndigo
```

## Components

### Plugin Setup

- [Plugin Bootstrap](https://github.com/drsmok3y/hoversync-reflect-hover-effects-on-elementor/blob/version1.2.0/hoversync-elementor-hover-effects.php): `hoversync-elementor-hover-effects.php`

### Editor Authoring

- [Interaction Controls](https://github.com/drsmok3y/hoversync-reflect-hover-effects-on-elementor/blob/version1.2.0/includes/class-controls.php): `includes/class-controls.php`
- [Editor Sync UI](https://github.com/drsmok3y/hoversync-reflect-hover-effects-on-elementor/blob/version1.2.0/assets/js/editor.js): `assets/js/editor.js`
- [AJAX Handler](https://github.com/drsmok3y/hoversync-reflect-hover-effects-on-elementor/blob/version1.2.0/includes/class-ajax-handler.php): `includes/class-ajax-handler.php`
- [Effect Records](https://github.com/drsmok3y/hoversync-reflect-hover-effects-on-elementor/blob/version1.2.0/includes/class-database.php): `includes/class-database.php`
- [Engine Settings](https://github.com/drsmok3y/hoversync-reflect-hover-effects-on-elementor/blob/version1.2.0/includes/class-settings.php): `includes/class-settings.php`
- [Editor Styles](https://github.com/drsmok3y/hoversync-reflect-hover-effects-on-elementor/blob/version1.2.0/assets/css/editor.css): `assets/css/editor.css`

### Page Rendering

- [Asset Renderer](https://github.com/drsmok3y/hoversync-reflect-hover-effects-on-elementor/blob/version1.2.0/includes/class-renderer.php): `includes/class-renderer.php`
- [Widget Config](https://github.com/drsmok3y/hoversync-reflect-hover-effects-on-elementor/blob/version1.2.0/includes/class-controls.php): `includes/class-controls.php`

### Interaction Runtime

- [Frontend Engine](https://github.com/drsmok3y/hoversync-reflect-hover-effects-on-elementor/blob/version1.2.0/assets/js/frontend.js): `assets/js/frontend.js`
- [Frontend Styles](https://github.com/drsmok3y/hoversync-reflect-hover-effects-on-elementor/blob/version1.2.0/assets/css/frontend.css): `assets/css/frontend.css`

### Other components

- **Site Editor**
- **Elementor**
- **GSAP CDN**
- **Rendered Page**
- **Trigger Widget**
- **Target Widgets**
- **WordPress AJAX**

## Connections

- 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