Title: CanvaMotion for Elementor Author: Abdullah Sharaf Published: May 3, 2026 Last modified: May 3, 2026 --- Search plugins ![](https://ps.w.org/canvamotion-for-elementor/assets/banner-772x250.png?rev=3521654) ![](https://ps.w.org/canvamotion-for-elementor/assets/icon-256x256.png?rev=3521654) # CanvaMotion for Elementor By [Abdullah Sharaf](https://profiles.wordpress.org/as8495/) [Download](https://downloads.wordpress.org/plugin/canvamotion-for-elementor.1.0.1.zip) * [Details](https://wordpress.org/plugins/canvamotion-for-elementor/#description) * [Reviews](https://wordpress.org/plugins/canvamotion-for-elementor/#reviews) * [Installation](https://wordpress.org/plugins/canvamotion-for-elementor/#installation) * [Development](https://wordpress.org/plugins/canvamotion-for-elementor/#developers) [Support](https://wordpress.org/support/plugin/canvamotion-for-elementor/) ## Description 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 ## Installation 1. Upload the `canvamotion-for-elementor` folder to `/wp-content/plugins/`, or install via **WP Admin Plugins Add New Upload Plugin**. 2. Activate the plugin through the **Plugins** menu in WordPress. 3. Elementor (free) must be installed and active — an admin notice will appear if it is not. **How to use** 1. Open any page in the Elementor editor. 2. Click a **Container** (or Section) element to select it. 3. Go to the **Style** tab (half-circle icon) in the left panel. 4. Scroll down to **Animated Background** and expand it. 5. Toggle **Enable Animated Background** to **Yes**. 6. Choose an animation type and adjust colours, dot count, size, speed, and mouse radius. ## FAQ ### 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. ## Reviews There are no reviews for this plugin. ## Contributors & Developers “CanvaMotion for Elementor” is open source software. The following people have contributed to this plugin. Contributors * [ Abdullah Sharaf ](https://profiles.wordpress.org/as8495/) [Translate “CanvaMotion for Elementor” into your language.](https://translate.wordpress.org/projects/wp-plugins/canvamotion-for-elementor) ### Interested in development? [Browse the code](https://plugins.trac.wordpress.org/browser/canvamotion-for-elementor/), check out the [SVN repository](https://plugins.svn.wordpress.org/canvamotion-for-elementor/), or subscribe to the [development log](https://plugins.trac.wordpress.org/log/canvamotion-for-elementor/) by [RSS](https://plugins.trac.wordpress.org/log/canvamotion-for-elementor/?limit=100&mode=stop_on_copy&format=rss). ## Changelog #### 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. ## Meta * Version **1.0.1** * Last updated **3 days ago** * Active installations **Fewer than 10** * WordPress version ** 6.0 or higher ** * Tested up to **6.9.4** * PHP version ** 7.4 or higher ** * Tags * [animation](https://wordpress.org/plugins/tags/animation/)[background](https://wordpress.org/plugins/tags/background/) [canvas](https://wordpress.org/plugins/tags/canvas/)[elementor](https://wordpress.org/plugins/tags/elementor/) [particles](https://wordpress.org/plugins/tags/particles/) * [Advanced View](https://wordpress.org/plugins/canvamotion-for-elementor/advanced/) ## Ratings No reviews have been submitted yet. [Your review](https://wordpress.org/support/plugin/canvamotion-for-elementor/reviews/#new-post) [See all reviews](https://wordpress.org/support/plugin/canvamotion-for-elementor/reviews/) ## Contributors * [ Abdullah Sharaf ](https://profiles.wordpress.org/as8495/) ## Support Got something to say? Need help? [View support forum](https://wordpress.org/support/plugin/canvamotion-for-elementor/)