[Visualize Algorithm - Find the Duplicate Number]

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.

[Visualize Algorithm - Find the Duplicate Number]

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 😅

[Visualize Algorithm - Find the Duplicate Number]

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 😅

 

 

[Visualize Algorithm - Find the Duplicate Number]

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.

[Visualize Algorithm - Find the Duplicate Number]

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!