Feedback for custom radio buttons implemented with GSAP

[Josh Dillon]

Hey everyone,

 

I've been working at improving my GSAP skills and was wondering if someone would be willing to have a look at a set of custom radio buttons I've created and give some feedback on how I'm using the library. You can see the pen below .

Essentially, I'm animating several SVG rect elements using elastic easing when a radio button is checked, and then applying an animation to a subset of the rect elements that runs every 1.5 seconds while the radio button is checked:
 

if (isChecked) {
  const randomNodes = nodes.slice(0, 10);
  this.randomNodesAnimation = gsap.to(randomNodes, {
    duration: 0.7,
    ease: "elastic.out(1, 0.1)",
    x: reverse ? "-100%" : "100%",
    stagger: 0.01,
    repeat: -1,
    repeatDelay: 1.5
  });
} else if (this.randomNodesAnimation) {
  this.randomNodesAnimation.kill();
}

I'd like to know if this is a suitable approach to achieve this.
 

There is also a minor issue that occurs if you spam click or tap (this issue is easiest to reproduce on mobile) the radio buttons where some of the rect elements don't finish animating - or maybe the rects that are leftover on Option 2 hadn't started animating when Option 1 was clicked.

I would appreciate any feedback or advice, thanks!

 

See the Pen fbd9c2387f616c27582516bf1a24cebd by jdillon (@jdillon) on CodePen.

[GreenSock]

Nice job on the effect, @Josh Dillon

 

I'm struggling to reproduce any issues.  I clicked around a ton very quickly. Can you be super clear about exactly how we can reproduce the challenge? It sounds like maybe a logic issue in your code related to overwriting(?) 

[Josh Dillon]

@GreenSock Thank you!

 

I've been working away on this since I originally posted, turns out overwrite: truewas the missing piece on the first nodes animation. Any feedback on the GSAP code itself?

[GreenSock]

Sorry, I don't have much time to dig deeply into the code and offer you strategies for improvement. Quick thoughts: 

1. Whenever you're doing percentage-based x/y transforms, I'd strongly recommend that you just use xPercent and yPercent

   // not as good
   x: isChecked ? "100%" : "-100%",
     
   // better
   xPercent: isChecked ? 100 : -100,

    

2. I'd probably consider creating each animation ONCE and then just play/reverse/restart for maximum performance. It may not make any noticeable difference. I'm just an optimization freak. 

Good luck!

[Josh Dillon]

Noted, thank you, I appreciate your time