[Circle button arrow infinite effect]

Ough. That's a bummer. Thanks for the advice anyway!

[Circle button arrow infinite effect]

Great! Thanks man. This works like a charm. Only problem now is getting it to work within my setup, Wordpress + Elementor. Something seems to keep messing with my animation like something is pulling on it from the other side. Any thoughts on that? I've used the same code, same classes.

 

Enorm bedankt voor je hulp in ieder geval!

 

 

[Circle button arrow infinite effect]

 Hi mvaneijgen, I've added a codepen in the original message. Hope this makes it easier to provide feedback

[Circle button arrow infinite effect]

Hi there,

 

I'm quite new to GSAP and i'm trying to create a button with some kind of infinite arrow animation. So the idea is that what you see is a circle button with an arrow inside of it. When you mouseenter the arrow moves x 100% and another arrow comes in from x -100% to x 0%. When you mouseleave the arrow moves to x 100% and another arrow comes in from x -100% to x 0%. So it's like a constant animation to the right. My idea was to use three containers with arrows inside of it so they can move consecutive and when the animation finishes it can restart instantly. But i think don't really get it yet.

 

This is my animation (i've turned off overflow hidden to see what happens to everything): https://playground.inchdesign.nl/gsap-circle-button-arrow-animation/

 

And this my code:

document.addEventListener("DOMContentLoaded", function() {
  // DOM elements
  const circleContainer = document.querySelector(".circle-container");
  const icons = [document.querySelector(".icon-1"), document.querySelector(".icon-2"), document.querySelector(".icon-3")];

  // Function to create a GSAP timeline for animations
  function createTimeline(icons, xValue) {
    const tl = gsap.timeline({ paused: true });
    icons.forEach(icon => {
      tl.to(icon, { duration: 0.2, x: xValue, ease: "power1.out" }, 0);
    });
    return tl;
  }

  // Create timelines
  const timeline1 = createTimeline(icons, "-200%");
  const timeline2 = createTimeline(icons, "0%");

  // Start entering animation on mouseenter
  circleContainer.addEventListener('mouseenter', () => {
    timeline1.play();
  });

  // Reset position on mouseleave
  circleContainer.addEventListener('mouseleave', () => {
    timeline2.play();
  });
});

 

I thought i found the solution when i read this post: 

 but i can't seem to convert it to my idea. Please help! Thanks in advance!

See the Pen wvRpPVo by inchdesign (@inchdesign) on CodePen