TomSES

This thread has been really informative and makes me think we jumped ship from class components too soon. It was unusual behaviour like this which made us move from Angular to React in the first place. Thanks, all for providing a few different solutions to this!

That's great, that is the one I have used which was the same method that Zach recommended. I think he was just looking for validation from someone with more React experience so thanks for providing that! i really appreciate how helpful everyone is on this forum.

I think you were checking out the fixed version but Zach wasn't 100% sure it was the best approach. The original 'broken' one can be found here: https://stackblitz.com/edit/react-l6a9q7

Hi Petr, I checked out the guide and it was really useful so thank you! Unfortunately, I could not see how to solve the specific issue I had other than how @ZachSaucier kindly showed me. Did you take a look at the first couple of examples to see the issue?

Well you have it working so it's a huge step up from my efforts! I guess if I can store the whole tl in a ref, it won't create a new each time. You've definitely pointed me in the right direction so thanks!

Thanks for replying so fast. I tried adding the count but the behaviour is pretty erratic, would you mind taking a look and letting it run 5-6 times? https://stackblitz.com/edit/react-l6a9q7

I'm sure this is something I'm doing wrong but I can't seem to accurately update state from an onComplete event. The counter successfully updates once but then seems stuck on '1'. The example below is very simple to show the issue. https://stackblitz.com/edit/react-l6a9q7 Any help would be really helpful Thanks so much!

This is brilliant! Thanks for your help.

Thank you both for your replies. I'm at work right now but I'm going to see if I can finish this off tonight and post anything that works back on here. ?

Thank you so much. I'm sure you can tell that I am very new to GSAP but this has helped explain loads to me already. I'm trying to get good enough to use in my companies production code so that we can become a proper member. You certainly don't have to help anymore but I was wondering how you would approach 'killing' the animation if someone were to click across all buttons faster than the animation runs? Does that make sense?

Thanks for getting back to me. Makes complete sense but I've had a look and can't figure it out myself. It's getting late in the UK so I'll take a look with fresh eyes tomorrow! This was a completely broken effort based on your feedback https://stackblitz.com/edit/gsap-react-listobject-stagger-ksuatq

Hi everyone. Firstly, I'd like to say thanks to an amazing forum, I've learnt so much here over the last few weeks. The effort you lot put into this is unreal. Unfortunately, I can't seem to find a solution to the issues I'm having, hence this post. I'm trying to stagger animate a list in and out that changes length and properties. I'm using gsap3 with react hooks. I'm sure this is common and I'm just approaching it wrong so I would really appreciate someone taking a look at the link below: https://stackblitz.com/edit/gsap-react-listobject-stagger Thanks so much!

If anyone is interested, I had to tweak this to allow for different children for the Modal. It's more usable that way. It also takes away the need for forwardRef unless I misunderstood the requirements. https://codesandbox.io/s/gsap-react-modal-timeline-8mvym?fontsize=14&hidenavigation=1&theme=dark Also, massive thanks for you guys for posting the first solution