Опис
CanvaMotion adds a new “Animated Background” capability to any Elementor Container or legacy Section element. It renders lightweight, GPU-friendly particle animations using the HTML5 Canvas 2D API and plain JavaScript — no external libraries, no iframes, no coding required.
Three animation types
- Neural Network — Floating nodes connected by a glowing line web. Mouse repels nodes away from the cursor.
- Particle Field — Glowing particles that drift and pulse in brightness. Mouse attracts particles magnetically toward the cursor.
- Constellation — Sparse twinkling stars joined by dashed lines. Mouse exerts gentle gravity pulling nearby stars closer.
What you can control per container
- Enable / disable animation with a single toggle
- Choose animation type from a dropdown
- Set dot colour, line colour, and optional canvas background colour
- Adjust dot count (10–200), dot size (1–10 px), speed (0.1–5×), and mouse influence radius (50–400 px)
- Live preview inside the Elementor editor — no page reload required
Performance
- Animations pause automatically when scrolled out of the viewport (IntersectionObserver)
- Canvas resizes automatically with the container (ResizeObserver)
- JavaScript loads in the footer — zero render-blocking
- No external HTTP requests at runtime
- Canvas uses
pointer-events: none— all content inside the container stays fully clickable
Compatibility
- Works with modern Elementor Containers and legacy Section elements
- Requires Elementor (free) — no Elementor Pro needed
Встановлення
- Upload the
canvamotion-for-elementorfolder to/wp-content/plugins/, or install via WP Admin Plugins Add New Upload Plugin. - Activate the plugin through the Plugins menu in WordPress.
- Elementor (free) must be installed and active — an admin notice will appear if it is not.
How to use
- Open any page in the Elementor editor.
- Click a Container (or Section) element to select it.
- Go to the Style tab (half-circle icon) in the left panel.
- Scroll down to Animated Background and expand it.
- Toggle Enable Animated Background to Yes.
- Choose an animation type and adjust colours, dot count, size, speed, and mouse radius.
Часті питання
-
Does this work with legacy Section elements?
-
Yes. The plugin supports both modern Elementor Containers and legacy Section elements.
-
Will the animation block clicks on content inside the container?
-
No. The canvas element uses
pointer-events: none, so all buttons, links, and other content inside the container remain fully interactive. -
Does it slow down my page?
-
No. Animations pause automatically when the container leaves the viewport. JavaScript is loaded in the footer (non-blocking) and makes no external HTTP requests at runtime. For best performance, keep dot count between 40–80.
-
Does it work without Elementor?
-
No. Elementor (free) must be installed and active.
-
Does it use jQuery or any external library?
-
No. The plugin uses vanilla JavaScript (ES6+) only.
-
Is Elementor Pro required?
-
No. The free version of Elementor is all you need.
Відгуки
Для цього плагіна немає відгуків.
Учасники та розробники
“CanvaMotion for Elementor” — проект з відкритим вихідним кодом. В розвиток плагіну внесли свій вклад наступні учасники:
Учасники
Перекладіть “CanvaMotion for Elementor” на вашу мову.
Цікавитесь розробкою?
Перегляньте код, перегляньте сховище SVN або підпишіться на журнал розробки за допомогою RSS.
Журнал змін
1.0.1
- Fix: IntersectionObserver was not disconnected on Elementor re-renders, causing ghost animation loops to accumulate.
- Fix: Frontend assets (CSS + JS) no longer load on every page — only on pages built with Elementor.
- Fix: plugins_loaded hook priority raised to 20 to prevent a false “Elementor missing” admin notice when Elementor loads after this plugin.
- Fix: Container resize now proportionally rescales particle positions instead of resetting all particles to random locations.
- Perf: Line colour parsed once per populate() and cached; eliminates ~60 redundant object allocations per second.
- Code: Each particle node now holds its own copy of the colour object instead of a shared reference.
1.0.0
- Initial release.
- Three animation types: Neural Network, Particle Field, Constellation.
- Eight configurable controls per container element.
- Live preview inside the Elementor editor.
- IntersectionObserver for off-screen pause, ResizeObserver for responsive canvas.