Visualize Algorithm - Find the Duplicate Number

[YazeedB]

Hi folks,

 

Link to demo

 

Super impressed with GSAP, thank you for creating this amazing tool.

 

It's my first time, and I'm integrating it with React to create an algorithm visualization tool. Can someone let me know if this animation follows GSAP best practices (probably doesn't)?

 

A Codesandbox demo was easy to setup, so hope that's okay!

[GreenSock]

Welcome to the forums, @YazeedB! Glad to hear you're enjoying GSAP. 

 

I skimmed your code and didn't notice any glaring issues - was there a particular area of concern you had? Is everything working the way you wanted? Disclaimer: I'm not a React guy at all, so I can't critique how you've structured things in React. 

[YazeedB]

10 minutes ago, GreenSock said:

Welcome to the forums, @YazeedB! Glad to hear you're enjoying GSAP. 

 

I skimmed your code and didn't notice any glaring issues - was there a particular area of concern you had? Is everything working the way you wanted? Disclaimer: I'm not a React guy at all, so I can't critique how you've structured things in React. 

Hey @GreenSock, thanks for the prompt response!

 

My specific concern is the structure itself. I'm wondering if Scene 3, the Two-Pointer animation, can be nicely done in GSAP. I had to resort to setTimeout + useEffect, which required me to hack around with pause/play to keep the animations in sync.

 

Is there a clean way to visualize this using a single GSAP timeline? Parent/child timelines would be fine too, I'd have to research it more though.

[GreenSock]

Oh! I didn't even see that file - I was only looking at the App.tsx file you linked to. Yeah, anytime you find yourself using setTimout(), you're probably doing it wrong  

 

You absolutely can create sequenced animation in one timeline. No need to setTimeout() - you can use the position parameter to add extra space between tweens/timelines, or you can overlap them, etc. It's a super flexible system once you get the hang of it. And nested timelines are incredibly powerful. Check out the article on writing animation code more efficiently: https://css-tricks.com/tips-for-writing-animation-code-efficiently/

 

As for how you structured things in React, I'll defer to @Rodrigo or @elegantseagulls on that. 

 

Lastly, it is generally not a good idea to create a timeline initially and then wait for user interaction to then add more tweens each time there's user interaction. It's just kinda wasteful. When you're reacting to user interaction, it's generally best to just create timelines or tweens at that point (each time). No need to constantly shove more into the same instance, though there are some exceptions. 

[GreenSock]

By the way, gsap.delayedCall() is a replacement for setTimeout() and it's better because it remains perfectly in-sync with the whole animation engine and screen repaints. 

[YazeedB]

2 hours ago, GreenSock said:

Oh! I didn't even see that file - I was only looking at the App.tsx file you linked to. Yeah, anytime you find yourself using setTimout(), you're probably doing it wrong  

 

You absolutely can create sequenced animation in one timeline. No need to setTimeout() - you can use the position parameter to add extra space between tweens/timelines, or you can overlap them, etc. It's a super flexible system once you get the hang of it. And nested timelines are incredibly powerful. Check out the article on writing animation code more efficiently: https://css-tricks.com/tips-for-writing-animation-code-efficiently/

 

As for how you structured things in React, I'll defer to @Rodrigo or @elegantseagulls on that. 

 

Lastly, it is generally not a good idea to create a timeline initially and then wait for user interaction to then add more tweens each time there's user interaction. It's just kinda wasteful. When you're reacting to user interaction, it's generally best to just create timelines or tweens at that point (each time). No need to constantly shove more into the same instance, though there are some exceptions. 

Makes sense, thank you for the thorough answer.

 

So for the Red/Blue pointer march, how would you conceptually animate it? These two pointers march until they're equal—which means you've found a duplicate number.

 

I'm still learning to "think in GSAP", so setTimeout still feels like the obvious solution 😅

 

 

[GreenSock]

It's not like it's "wrong" to use setTimeout() - it just won't be perfectly synced which may not matter in some scenarios. And I didn't mean to imply there's anything wrong in your current implementation either. If it's working for you, great! 

 

As for the pointer march, I'm not totally clear on what you're asking. Are you asking how I'd approach building an repeating animation (pointers going up and down) that moves intermittently to the right based on some kind of conditional logic or user input that isn't predictable ahead of time? 

[YazeedB]

Just now, GreenSock said:

It's not like it's "wrong" to use setTimeout() - it just won't be perfectly synced which may not matter in some scenarios. And I didn't mean to imply there's anything wrong in your current implementation either. If it's working for you, great! 

 

As for the pointer march, I'm not totally clear on what you're asking. Are you asking how I'd approach building an repeating animation (pointers going up and down) that moves intermittently to the right based on some kind of conditional logic or user input that isn't predictable ahead of time? 

Not at all! In fact your earlier answer confirmed my gut feeling—setTimeout is likely an anti-pattern here.

 

What do you think of this new Codesandbox? Literally just finished, and it's 100% GSAP now.

 

Still trying to make the pointers bounce like last time though 😅

[GreenSock]

28 minutes ago, YazeedB said:

Still trying to make the pointers bounce like last time though 😅

A few things: 

1. You're sequencing the "bouncing" into the end of the timeline. That's not the effect you're looking for. Just have that in a separate repeating tween. You could simplify it to a single one using function-based values to handle the oscillating: 

   gsap.fromTo(".pointer.one, .pointer.two", {
     y: i => i % 2 ? "+=10" : "-=10"
   }, {
     y: i => i % 2 ? "-=20" : "+=20",
     duration: 0.5,
     ease: "power1.inOut",
     repeat: -1,
     yoyo: true
   });

    

2. You do NOT need to duplicate all the special properties like "repeat", "yoyo", etc. in the "from" object of a gsap.fromTo(). All that just belongs in the "to" portion. 
3. There's no need to define repeatDelay: 0 (that's the default)
4. You're attempting to animate transforms of inline elements which most browsers won't render. So if you try running the tween above, it'll look like it isn't working, but crack open Dev Tools and you'll see that GSAP is indeed applying the transforms correctly but the browser just doesn't render them on inline elements. You'd need to switch to something like inline-block or block. 

Don't feel like you need to put everything in a timeline - those are super useful for sequenced animation but sometimes I see people feeling like they've gotta do everything in there and it can be limiting. For example the "bouncing" of the pointers can be a completely separate dynamic tween (or timeline). You can fire off other tweens independently too based on user interaction or whatever. 

 

Make sense? 

[YazeedB]

12 hours ago, GreenSock said:

Make sense? 

Yup makes perfect sense! Thank you for the clear and thorough explanation.

 

The callback function idea is great, so cool to see GSAP covering all these bases.

 

I've refactored to this version, and it now handles arrays without duplicates, and the resulting code is lighter.