Opis
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
Instalacija
- 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.
ČPP
-
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.
Recenzije
Nema recenzija za ovaj dodatak.
Suradnici i Programeri
“CanvaMotion for Elementor” je softver otvorenog koda. Sljedeće osobe su doprinijele ovom dodatku.
Suradnici
Prevedite “CanvaMotion for Elementor” na svoj jezik.
Zainteresirani ste za razvoj?
Pregledajte kôd, pogledajte SVN spremišteili se pretplatite na dnevnik razvoja od RSS.
Dnevnik promjena
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.