Canvas-confetti on mobile devices.

[KariReis]

Hello Kiril,

I'm using canvas-confetti on a website. It was incredible. However, I'm having difficulty getting it to work on tablet and mobile.

As I don't have much experience, I was wondering if you could help me.

My code is like this:

<script src="https://cdn.jsdelivr.net/npm/canvas-confetti@1.5.1/dist/confetti.browser.min.js"></script> <script> function myConfetti() { var end = Date.now() + (5 * 1000); var colors = ['#8f00ff', '#fbf9fc']; (function frame() { confetti({ particleCount: 2, angle: 60, spread: 40, origin: { x: 0 }, colors: colors }); confetti({ particleCount: 2, angle: 120, spread: 40, origin: { x: 1 }, colors: colors }); if (Date.now() < end) { requestAnimationFrame(frame); } }()); } // Function to check if the element is leaving the screen function isElementOutViewport(el) { var rect = el.getBoundingClientRect(); return ( rect.bottom < 0 || rect.right < 0 || rect.left > window.innerWidth || rect.top > window.innerHeight ); } // Function to check section visibility function isSectionVisible(section) { var rect = section.getBoundingClientRect(); return ( rect.top < window.innerHeight && rect.bottom > 0 ); } // Function to observe changes in element and section visibility function observeVisibility() { var confettiElement = document.querySelector('.how-layout_card.is-confetti'); var section = document.querySelector('.section_how-layout'); var observer = new IntersectionObserver(function(entries) { entries.forEach(function(entry) { if (entry.isIntersecting) { myConfetti(); } }); }, { threshold: 0 }); observer.observe(confettiElement); // Observe section visibility var sectionObserver = new IntersectionObserver(function(entries) { entries.forEach(function(entry) { if (!entry.isIntersecting) { // Stop animation when section is no longer visible } }); }, { threshold: 0 }); sectionObserver.observe(section); } // Function call to observe visibility observeVisibility(); </script>

I'm using this animation in Weblfow.

Thank you very much!