GSAP Animation Cleanup

[Adam Kozel]

I am building a code exporter for GSAP React in vanilla JS/HTML/CSS as an exercise and proof of concept. It seems like whenever i update the parameters the GSAP animation multiplies resulting in huge jumps in motion. I have tried .kill but no results. I am wondering if there is a better way to do the hover interaction?

Demo can be found here

Js code:
 

// Define a function to handle the animation
function animateElement() {
  const element = document.getElementById("element");
  const container = document.getElementById("container");
  const width = document.getElementById("widthInput").value;
  const height = document.getElementById("heightInput").value;
  const unit = document.getElementById("unitSelect").value;
  const fromwidth = document.getElementById("fromwidthInput").value;
  const fromheight = document.getElementById("fromheightInput").value;
  const ease = document.getElementById("easeSelect").value;
  const duration = document.getElementById("durationInput").value;
  const scrolltriggercheck = document.getElementById("scrolltriggercheckbox").checked;
  const radiobasic = document.getElementById("radiobasic").checked;

  // Set initial values
  gsap.set("#element", {
      width: fromwidth + unit,
      height: fromheight + unit,
  });

  // Define the animation based on mouse enter and leave events
  container.addEventListener("mouseenter", () => {
      gsap.to("#element", {
          width: width + unit,
          height: height + unit,
          ease: ease,
      });
  });

  container.addEventListener("mouseleave", () => {
      gsap.to("#element", {
          width: fromwidth + unit,
          height: fromheight + unit,
      });
  });

  // Generate the exported code dynamically
  const exportedCode = `${
      radiobasic
          ? `export function animation(): Override {
        useGSAP(() => {
            gsap.fromTo(
                "#element",
                {
                  width: '${fromwidth}${unit}',
                  height: '${fromheight}${unit}',
              },
              {
                 delay: 0.1,
                 duration: ${duration},
                 width: '${width}${unit}',
                 height: '${height}${unit}',
                 ease: '${ease}',
                 ${
                     scrolltriggercheck
                         ? `scrollTrigger: {
                        trigger: "#element",
                        start: "top bottom",
                        end: "bottom top",
                        stagger: 0.5,
                        markers: false,
                    },`
                         : ``
                 }
                }
            )
        }, [])
        return {}
    };`
          : `Hover`
  }`;
  document.getElementById("exportedCode").value = exportedCode;
}

// Attach event listeners to input fields to trigger the animation dynamically
const inputFields = document.querySelectorAll("#widthInput, #heightInput, #unitSelect, #fromwidthInput, #fromheightInput, #easeSelect, #durationInput, #scrolltriggercheckbox, input[name='animationtype']");
inputFields.forEach(input => {
  input.addEventListener("input", animateElement);
});

// Initial call to set up the animation based on initial values
animateElement();

 

See the Pen zYXJwMM by Adam-Kozel (@Adam-Kozel) on CodePen

[Rodrigo]

Hi, 

 

I looked at your demo and I can't see any jumps, maybe the issue is just a perception that stems from the easing function you're using right now. By default you have expo.out, that will accelerate the animation a lot at the start of it. You can check our ease visualizer to see that. If you change that to none, you won't see any jumps in the animation:

https://gsap.com/docs/v3/Eases/

 

Hopefully this helps.

Happy Tweening!