Javascript animation on cloned page

  • Unknown's avatar
    mateolefort · Member ·

    I have a page with javascript animation, when it is cloned the animation does not work. I have inspected the code of cloned page and the javascript code is there though the animation is not present; there is just an empty space where the animation should be. Could anyone be so kind as to shed some light what the problem might be?

    The blog I need help with is: (visible only to logged in users)

  • Unknown's avatar
    jaygumanidwork · Member ·

    Hello @mateolefort

    Thanks for sharing your concern. Just so we are on the same page, the cloned page you need help with is Industria, yes? Inferring from your description, it does have a rectangular empty space. But feel free to correct me if I’m wrong.

    However, if we are indeed on the same page, then to fix the issue, you will need to clear your site’s cache.

    If you add /?*cachebuster* onto your page’s URL, the content of the empty space reappears, indicating the block that held the cloned JavaScript was cached.

    Once you’ve cleared your site’s cache, you will also need to clear your browser cache.

    I hope this helps, and let me know how it goes.

  • Unknown's avatar
    jaygumanidwork · Member ·

    Also, @mateolefort, you might need to close this duplicate thread to stay aligned with WordPress.com forum rules.

    Thanks!

  • Unknown's avatar
    jessicaandrews257 · Member ·

    Possible Causes & Solutions

    1. JavaScript Files Not Loading Properly
      • If the original page loads JavaScript files dynamically, ensure that the cloned page also properly references them.
      • Check the browser console (F12 → Console) for errors indicating missing scripts.
      Solution:
      • Ensure the script files are properly included using absolute paths instead of relative ones.
      • Try manually reloading the scripts in the cloned page:javascriptCopyEditvar script = document.createElement('script'); script.src = "your-animation.js"; document.body.appendChild(script);
    2. Event Listeners Are Not Re-Attached
      • If the animation relies on event listeners that were attached on page load, they might not exist on the cloned elements.
      Solution:
      • Reinitialize the animation after cloning:javascriptCopyEdit// Assuming initAnimation() starts the animation setTimeout(() => { initAnimation(); }, 100);
    3. CSS and Inline Styles Missing
      • Sometimes, animations depend on CSS styles that are not copied with the DOM elements.
      Solution:
      • Ensure stylesheets are correctly linked in the cloned page.
      • Try copying computed styles manually:javascriptCopyEditfunction copyStyles(source, target) { let styles = window.getComputedStyle(source); for (let i = 0; i < styles.length; i++) { target.style[styles[i]] = styles.getPropertyValue(styles[i]); } }
    4. Canvas or WebGL Elements Not Copied Properly
      • If the animation uses a <canvas> element, cloning the DOM won’t clone the actual pixel data.
      Solution:
      • Instead of cloning, manually redraw the canvas:javascriptCopyEditlet originalCanvas = document.getElementById('yourCanvas'); let clonedCanvas = originalCanvas.cloneNode(); let ctx = clonedCanvas.getContext('2d'); ctx.drawImage(originalCanvas, 0, 0);
    5. Scripts Using DOMContentLoaded or window.onload
      • If your script initializes only when the page loads, cloning will not trigger these events.
      Solution:
      • Manually trigger the animation initialization after cloning:javascriptCopyEditdocument.addEventListener("DOMContentLoaded", function() { initAnimation(); });
    6. Issues with jQuery .clone()
      • If you are using jQuery’s .clone(), it does not copy event listeners.
      Solution:
      • Use:javascriptCopyEdit$('#elementToClone').clone(true).appendTo('#targetContainer');
      • The true parameter ensures event handlers are copied.

    Final Check

    • Open Developer Console (F12 → Console) and check for errors.
    • Check Network tab to see if scripts are failing to load.
    • Verify that all animations are initialized after the cloning.
  • The topic ‘Javascript animation on cloned page’ is closed to new replies.