rklump-temp

snappers.

• share article
  • copy linkshare on
  • emailshare on
  • facebookshare on facebook
  • twittierShare on Twitter
  • turnedout
  • redditshare on reddit
  • mastodonshare on mastodon
  • whatsappshare on whatsapp

WordPress Balz

WordPress GSAP

// Set up the rotation animation for #wp-thump-pud
gsap.set("#wp-thump-pud", {
  transformOrigin: "50% 100%" // Set transform origin to the center bottom
});

let thumpAnimation = gsap.to("#wp-thump-pud", {
  rotation: -5,
  duration: 0.001, // Time for each rotation
  ease: "bounce.inOut", // Add bounce easing effect
  yoyo: true, // Enable back and forth animation
  repeat: -1, // Repeat infinitely
  yoyoEase: true, // Apply easing in both directions
  repeatDelay: 0.05, // Delay between repetitions
  paused: true // Start paused
});

// Set up the path point animation for #myPath
let pathAnimation = gsap.fromTo("#myPath",
  {
    attr: { d: "M389.5,199.5c0,104.93-85.07,190-190,190S9.5,304.43,9.5,199.5,94.57,9.5,199.5,9.5c41.17,0,79.27,13.09,110.39,35.34,13.39,9.57,25.48,20.84,35.97,33.49,13.06,15.75,23.62,33.65,31.08,53.08,8.12,21.14,12.57,44.1,12.57,68.1Z" }, // Original coordinates
  },
  {
    attr: { d: "M389.5,199.5c0,104.9-85.1,190-190,190S9.5,304.4,9.5,199.5,94.6,9.5,199.5,9.5s79.3,13.1,110.4,35.3c13.4,9.6,34.1-19.4,59.2,6.5,21.5,22.2.4,60.6,7.8,80s12.6,44.1,12.6,68.1Z" }, // New coordinates
    duration: 1, // Duration of the oscillation
    ease: "bounce.inOut", // Add bounce easing effect
    yoyo: true, // Enable back and forth animation
    repeat: -1, // Repeat infinitely
    yoyoEase: true, // Apply easing in both directions
    repeatDelay: 0.05, // Delay between repetitions
    paused: true // Start paused
  }
);

// Event listeners for mouseenter and mouseleave
document.getElementById("wp-pthump").addEventListener("mouseenter", function() {
  const pudElement = document.getElementById("pud");
  if (pudElement) {
    pudElement.style.display = 'block'; // Show the element
    thumpAnimation.play(); // Start the rotation animation
    pathAnimation.play(); // Start the path point animation
  }
});

document.getElementById("wp-pthump").addEventListener("mouseleave", function() {
  thumpAnimation.pause(); // Stop the rotation animation
  pathAnimation.pause(); // Stop the path point animation
  const pudElement = document.getElementById("pud");
  if (pudElement) {
    pudElement.style.display = 'none'; // Hide the element again
  }
  resetPoints(); // Reset the path to its original state
});

// Function to reset the path to its original state
function resetPoints() {
  let path = document.getElementById("myPath");

  // Reset the path back to its original state
  gsap.to(path, {
    duration: 0.5,
    attr: {
      d: "M389.5,199.5c0,104.93-85.07,190-190,190S9.5,304.43,9.5,199.5,94.57,9.5,199.5,9.5c41.17,0,79.27,13.09,110.39,35.34,13.39,9.57,25.48,20.84,35.97,33.49,13.06,15.75,23.62,33.65,31.08,53.08,8.12,21.14,12.57,44.1,12.57,68.1Z" // Original coordinates
    },
    ease: "power1.inOut"
  });
}