{"id":301899,"date":"2026-05-03T18:01:46","date_gmt":"2026-05-03T18:01:46","guid":{"rendered":"https:\/\/en-gb.wordpress.org\/plugins\/ele-animator\/"},"modified":"2026-05-03T20:37:54","modified_gmt":"2026-05-03T20:37:54","slug":"canvamotion-for-elementor","status":"publish","type":"plugin","link":"https:\/\/hr.wordpress.org\/plugins\/canvamotion-for-elementor\/","author":23483003,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_crdt_document":"","version":"1.0.1","stable_tag":"1.0.1","tested":"6.9.4","requires":"6.0","requires_php":"7.4","requires_plugins":null,"header_name":"CanvaMotion for Elementor","header_author":"A.Sharaf","header_description":"Adds futuristic animated canvas backgrounds (Neural Network, Particle Field, Constellation) to Elementor containers with interactive mouse tracking.","assets_banners_color":"082e45","last_updated":"2026-05-03 20:37:54","external_support_url":"","external_repository_url":"","donate_link":"","header_plugin_uri":"https:\/\/wordpress.org\/plugins\/canvamotion-for-elementor\/","header_author_uri":"https:\/\/www.linkedin.com\/in\/a-sharaf-2824151a5","rating":0,"author_block_rating":0,"active_installs":0,"downloads":71,"num_ratings":0,"support_threads":0,"support_threads_resolved":0,"author_block_count":0,"sections":["description","installation","faq","changelog"],"tags":{"1.0.0":{"tag":"1.0.0","author":"as8495","date":"2026-05-03 17:45:24"},"1.0.1":{"tag":"1.0.1","author":"as8495","date":"2026-05-03 20:37:54"}},"upgrade_notice":{"1.0.0":"<p>Initial release \u2014 no upgrade steps required.<\/p>"},"ratings":[],"assets_icons":{"icon-128x128.png":{"filename":"icon-128x128.png","revision":3521654,"resolution":"128x128","location":"assets","locale":""},"icon-256x256.png":{"filename":"icon-256x256.png","revision":3521654,"resolution":"256x256","location":"assets","locale":""}},"assets_banners":{"banner-1544x500.png":{"filename":"banner-1544x500.png","revision":3521654,"resolution":"1544x500","location":"assets","locale":""},"banner-772x250.png":{"filename":"banner-772x250.png","revision":3521654,"resolution":"772x250","location":"assets","locale":""}},"assets_blueprints":{},"all_blocks":[],"tagged_versions":["1.0.0","1.0.1"],"block_files":[],"assets_screenshots":[],"screenshots":{"1":"The \"Animated Background\" section in the Elementor Style tab.","2":"Neural Network animation active on a hero container.","3":"Particle Field animation on a feature section.","4":"Constellation animation on a dark background container."},"jetpack_post_was_ever_published":false},"plugin_section":[],"plugin_tags":[785,2767,864,76538,190643],"plugin_category":[50],"plugin_contributors":[261749],"plugin_business_model":[],"class_list":["post-301899","plugin","type-plugin","status-publish","hentry","plugin_tags-animation","plugin_tags-background","plugin_tags-canvas","plugin_tags-elementor","plugin_tags-particles","plugin_category-media","plugin_contributors-as8495","plugin_committers-as8495"],"banners":{"banner":"https:\/\/ps.w.org\/canvamotion-for-elementor\/assets\/banner-772x250.png?rev=3521654","banner_2x":"https:\/\/ps.w.org\/canvamotion-for-elementor\/assets\/banner-1544x500.png?rev=3521654","banner_rtl":false,"banner_2x_rtl":false},"icons":{"svg":false,"icon":"https:\/\/ps.w.org\/canvamotion-for-elementor\/assets\/icon-128x128.png?rev=3521654","icon_2x":"https:\/\/ps.w.org\/canvamotion-for-elementor\/assets\/icon-256x256.png?rev=3521654","generated":false},"screenshots":[],"raw_content":"<!--section=description-->\n<p>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 \u2014 no external libraries, no iframes, no coding required.<\/p>\n\n<p><strong>Three animation types<\/strong><\/p>\n\n<ul>\n<li><strong>Neural Network<\/strong> \u2014 Floating nodes connected by a glowing line web. Mouse repels nodes away from the cursor.<\/li>\n<li><strong>Particle Field<\/strong> \u2014 Glowing particles that drift and pulse in brightness. Mouse attracts particles magnetically toward the cursor.<\/li>\n<li><strong>Constellation<\/strong> \u2014 Sparse twinkling stars joined by dashed lines. Mouse exerts gentle gravity pulling nearby stars closer.<\/li>\n<\/ul>\n\n<p><strong>What you can control per container<\/strong><\/p>\n\n<ul>\n<li>Enable \/ disable animation with a single toggle<\/li>\n<li>Choose animation type from a dropdown<\/li>\n<li>Set dot colour, line colour, and optional canvas background colour<\/li>\n<li>Adjust dot count (10\u2013200), dot size (1\u201310 px), speed (0.1\u20135\u00d7), and mouse influence radius (50\u2013400 px)<\/li>\n<li>Live preview inside the Elementor editor \u2014 no page reload required<\/li>\n<\/ul>\n\n<p><strong>Performance<\/strong><\/p>\n\n<ul>\n<li>Animations pause automatically when scrolled out of the viewport (IntersectionObserver)<\/li>\n<li>Canvas resizes automatically with the container (ResizeObserver)<\/li>\n<li>JavaScript loads in the footer \u2014 zero render-blocking<\/li>\n<li>No external HTTP requests at runtime<\/li>\n<li>Canvas uses <code>pointer-events: none<\/code> \u2014 all content inside the container stays fully clickable<\/li>\n<\/ul>\n\n<p><strong>Compatibility<\/strong><\/p>\n\n<ul>\n<li>Works with modern Elementor Containers and legacy Section elements<\/li>\n<li>Requires Elementor (free) \u2014 no Elementor Pro needed<\/li>\n<\/ul>\n\n<!--section=installation-->\n<ol>\n<li>Upload the <code>canvamotion-for-elementor<\/code> folder to <code>\/wp-content\/plugins\/<\/code>, or install via <strong>WP Admin \u2192 Plugins \u2192 Add New \u2192 Upload Plugin<\/strong>.<\/li>\n<li>Activate the plugin through the <strong>Plugins<\/strong> menu in WordPress.<\/li>\n<li>Elementor (free) must be installed and active \u2014 an admin notice will appear if it is not.<\/li>\n<\/ol>\n\n<p><strong>How to use<\/strong><\/p>\n\n<ol>\n<li>Open any page in the Elementor editor.<\/li>\n<li>Click a <strong>Container<\/strong> (or Section) element to select it.<\/li>\n<li>Go to the <strong>Style<\/strong> tab (half-circle icon) in the left panel.<\/li>\n<li>Scroll down to <strong>Animated Background<\/strong> and expand it.<\/li>\n<li>Toggle <strong>Enable Animated Background<\/strong> to <strong>Yes<\/strong>.<\/li>\n<li>Choose an animation type and adjust colours, dot count, size, speed, and mouse radius.<\/li>\n<\/ol>\n\n<!--section=faq-->\n<dl>\n<dt id=\"does%20this%20work%20with%20legacy%20section%20elements%3F\"><h3>Does this work with legacy Section elements?<\/h3><\/dt>\n<dd><p>Yes. The plugin supports both modern Elementor Containers and legacy Section elements.<\/p><\/dd>\n<dt id=\"will%20the%20animation%20block%20clicks%20on%20content%20inside%20the%20container%3F\"><h3>Will the animation block clicks on content inside the container?<\/h3><\/dt>\n<dd><p>No. The canvas element uses <code>pointer-events: none<\/code>, so all buttons, links, and other content inside the container remain fully interactive.<\/p><\/dd>\n<dt id=\"does%20it%20slow%20down%20my%20page%3F\"><h3>Does it slow down my page?<\/h3><\/dt>\n<dd><p>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\u201380.<\/p><\/dd>\n<dt id=\"does%20it%20work%20without%20elementor%3F\"><h3>Does it work without Elementor?<\/h3><\/dt>\n<dd><p>No. Elementor (free) must be installed and active.<\/p><\/dd>\n<dt id=\"does%20it%20use%20jquery%20or%20any%20external%20library%3F\"><h3>Does it use jQuery or any external library?<\/h3><\/dt>\n<dd><p>No. The plugin uses vanilla JavaScript (ES6+) only.<\/p><\/dd>\n<dt id=\"is%20elementor%20pro%20required%3F\"><h3>Is Elementor Pro required?<\/h3><\/dt>\n<dd><p>No. The free version of Elementor is all you need.<\/p><\/dd>\n\n<\/dl>\n\n<!--section=changelog-->\n<h4>1.0.1<\/h4>\n\n<ul>\n<li>Fix: IntersectionObserver was not disconnected on Elementor re-renders, causing ghost animation loops to accumulate.<\/li>\n<li>Fix: Frontend assets (CSS + JS) no longer load on every page \u2014 only on pages built with Elementor.<\/li>\n<li>Fix: plugins_loaded hook priority raised to 20 to prevent a false \"Elementor missing\" admin notice when Elementor loads after this plugin.<\/li>\n<li>Fix: Container resize now proportionally rescales particle positions instead of resetting all particles to random locations.<\/li>\n<li>Perf: Line colour parsed once per populate() and cached; eliminates ~60 redundant object allocations per second.<\/li>\n<li>Code: Each particle node now holds its own copy of the colour object instead of a shared reference.<\/li>\n<\/ul>\n\n<h4>1.0.0<\/h4>\n\n<ul>\n<li>Initial release.<\/li>\n<li>Three animation types: Neural Network, Particle Field, Constellation.<\/li>\n<li>Eight configurable controls per container element.<\/li>\n<li>Live preview inside the Elementor editor.<\/li>\n<li>IntersectionObserver for off-screen pause, ResizeObserver for responsive canvas.<\/li>\n<\/ul>","raw_excerpt":"Animated canvas backgrounds for Elementor \u2014 Neural Network, Particle Field, and Constellation \u2014 with live preview and interactive mouse tracking.","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/hr.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin\/301899","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/hr.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin"}],"about":[{"href":"https:\/\/hr.wordpress.org\/plugins\/wp-json\/wp\/v2\/types\/plugin"}],"replies":[{"embeddable":true,"href":"https:\/\/hr.wordpress.org\/plugins\/wp-json\/wp\/v2\/comments?post=301899"}],"author":[{"embeddable":true,"href":"https:\/\/hr.wordpress.org\/plugins\/wp-json\/wporg\/v1\/users\/as8495"}],"wp:attachment":[{"href":"https:\/\/hr.wordpress.org\/plugins\/wp-json\/wp\/v2\/media?parent=301899"}],"wp:term":[{"taxonomy":"plugin_section","embeddable":true,"href":"https:\/\/hr.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_section?post=301899"},{"taxonomy":"plugin_tags","embeddable":true,"href":"https:\/\/hr.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_tags?post=301899"},{"taxonomy":"plugin_category","embeddable":true,"href":"https:\/\/hr.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_category?post=301899"},{"taxonomy":"plugin_contributors","embeddable":true,"href":"https:\/\/hr.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_contributors?post=301899"},{"taxonomy":"plugin_business_model","embeddable":true,"href":"https:\/\/hr.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_business_model?post=301899"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}