Circle button arrow infinite effect

[Inch]

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

[GSAP Helper]

It's pretty tough to troubleshoot without a minimal demo - the issue could be caused by CSS, markup, a third party library, your browser, an external script that's totally unrelated to GSAP, etc. Would you please provide a very simple CodePen or Stackblitz that demonstrates the issue? 

 

Please don't include your whole project. Just some colored <div> elements and the GSAP code is best. See if you can recreate the issue with as few dependancies as possible. If not, incrementally add code bit by bit until it breaks. Usually people solve their own issues during this process! If not, then at least we have a reduced test case which greatly increases your chances of getting a relevant answer.

 

Here's a starter CodePen that loads all the plugins. Just click "fork" at the bottom right and make your minimal demo: 

See the Pen aYYOdN by GreenSock (@GreenSock) on CodePen

 

Using a framework/library like React, Vue, Next, etc.? 

CodePen isn't always ideal for these tools, so here are some Stackblitz starter templates that you can fork and import the gsap-trial NPM package for using any of the bonus plugins: 

• React (please read this article!)
• Next
• Svelte
• Sveltekit
• Vue
• Nuxt

 

Please share the StackBlitz link directly to the file in question (where you've put the GSAP code) so we don't need to hunt through all the files. 

 

Once we see an isolated demo, we'll do our best to jump in and help with your GSAP-specific questions. 

[mvaneijgen]

Hi @Inch welcome to the forum!

 

We can't see your page (because it isn't a published page), but even if we could there is no way to modify code on a live site. That is why Codepen is so great, you can just build a small demo that is easily shared with anyone and even better you can keep forking your versions to improve it and fall back at earlier versions if it is not working out. 

 

Just to give you some guidance, I would just create a timeline that moves two arrows and just call .restart() each time you want to play that animation. This will always play it from a time of zero. Without a minimal demo that is the best I can do for now, but if you're still stuck providing one will allow us to provide better feedback. 

 

If you change your mind and you do want the arrow to move back if it hasn't moved all the way check out our own @Carl's tutorial on creating distinct enter and leave animations. Hope it helps and happy tweening! 

 

 

[Inch]

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

[mvaneijgen]

Thanks! Ha, it was almost exactly how I described, I love blind coding 😅.

 

I've moved some of you're code around to make the most simple version, just a timeline with one tween, that moves all the icons and that timeline gets .restart() on mouse enter and leave. I've used the fact that a tween can animate multiple items (an array) at the same time and I swapped out your x property with xPercent, this one is build for animating percentages, so better to use in this case. 

 

Hoop het het helpt en veel geluk!

 

See the Pen ExGooRq?editors=0100 by mvaneijgen (@mvaneijgen) on CodePen

[mvaneijgen]

Kon het niet laten!

 

I didn't like the fact that the offset needed to be set based on the amount of items there were, so I wrapped all the arrows in a container and did some calculations to have it always work, no matter the amount of icons. 

 

See the Pen VwqyyoP?editors=0011 by mvaneijgen (@mvaneijgen) on CodePen

[Inch]

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!

 

 

[mvaneijgen]

Elementor is probably adding transition: all 300ms ease-in; to your elements with CSS or something along those lines. Which is a no go if you want to animate things with GSAP.  Read:

 

Quote

You should never apply CSS transitions to anything that JavaScript is animating because not only is it horrible for performance, but it'll prolong all the effects because whenever JavaScript updates a value (which GSAP typically does 60 times per second), the CSS transitions interrupt and say "NOPE! I won't allow that value to be changed right now...instead, I'm gonna slowly make it change over time". So it disrupts things, adds a bunch of load to the CPU because you've now got CSS and JS both fighting over the same properties, but let's say you've got a 1-second tween and the CSS transitions are set to take 1000ms...that means what you intended to take 1 second will actually take 2 seconds to complete. 

 

I also do a lot of Wordpress development, but I wouldn't touch Elementor with a 10 foot pole, because this reason exactly, as soon as you really want to design websites, you have to first remove everything it does, to get it to stop interfering 🤷‍♂️ sorry I can't help you with it. 

[Inch]

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