any cool js animations for on click effect kindly suggest,

Question

Mohamed Azarudeen Z · Answer

Hi vamsi try this .box { width: 100px; height: 100px; background-color: blue; transition: transform 0.3s ease; } .box.clicked { transform: scale(1.2) rotate(45deg); } function animateBox() { var box = document.querySelector('.box'); box.classList.toggle('clicked'); } If u can give more details on what you are expecting ill try a few more

Deepak Rawat · Answer

JavaScript animation for an on-click effect using the GSAP (GreenSock Animation Platform) library Click Animation .box { width: 100px; height: 100px; background-color: #ff6347; cursor: pointer; } const box = document.querySelector('.box'); box.addEventListener('click', function() { // Animate the box when clicked gsap.to(box, { duration: 1, scaleX: 2, scaleY: 2, backgroundColor: '#ffd700', ease: 'power2.out', onComplete: function() { // Reset the box after the animation is complete gsap.to(box, { duration: 1, scaleX: 1, scaleY: 1, backgroundColor: '#ff6347', ease: 'power2.out' }); } }); });

Prathap Reddy · Answer

Hi Vamsi ! You can go through the below code snippet : const btn = document.querySelector("button"); btn.addEventListener("click", () => { const ripple = document.createElement("div"); ripple.classList.add("ripple"); ripple.style.top = btn.offsetTop + "px"; ripple.style.left = btn.offsetLeft + "px"; document.body.appendChild(ripple); ripple.addEventListener("animationend", () => { document.body.removeChild(ripple); }); ripple.animate({ width: btn.offsetWidth, height: btn.offsetHeight, borderRadius: "50%", background: "red", }, { duration: 500, }); });

Vishal Joshi · Answer

Hello Vamsi, Please check out the below sample code for js animation. Animate on click with Javascript! body { margin: 0; } Hello World! Click to Animate function beyblade() { let x = document.getElementById("animate") x.style.marginLeft = "300px" x.style.transition = "1s" } Please share more detail like the case where needed animation so accordingly we can review and use third-party animation or create our own custom animation. Thanks

any cool js animations for on click effect kindly suggest,

Insert Link

Embed YouTube Video

Table Options

Insert Image

Answers (4)