TomSES Posted February 18, 2020 Share Posted February 18, 2020 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! See the Pen by edit (@edit) on CodePen Link to comment Share on other sites More sharing options...
ZachSaucier Posted February 18, 2020 Share Posted February 18, 2020 Hey TomSES and welcome! We're so glad you like GSAP. I'm on mobile right now so I can't do much with code, but I believe the issue is that you create tweens at the start but the references to those are changed. It's probably best to create a new tween each time your references change. So it might be best to use tweens instead of a timeline 🙂 you can still reverse the last tween that you made if need be. Link to comment Share on other sites More sharing options...
TomSES Posted February 19, 2020 Author Share Posted February 19, 2020 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 Link to comment Share on other sites More sharing options...
ZachSaucier Posted February 19, 2020 Share Posted February 19, 2020 Here's one way to do it: https://stackblitz.com/edit/gsap-react-listobject-stagger-rhbcnm?file=index.js 1 Link to comment Share on other sites More sharing options...
TomSES Posted February 19, 2020 Author Share Posted February 19, 2020 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? Link to comment Share on other sites More sharing options...
ZachSaucier Posted February 19, 2020 Share Posted February 19, 2020 Yes, it makes sense. I would change the complete callbacks as needed and perhaps reverse the fade in animation: https://stackblitz.com/edit/gsap-react-listobject-stagger-cskswx?file=index.js I think my logic is correct in the demo above but weirdly if you click while the new list is fading in fadeInTween is being reported as undefined when it definitely should be defined. Maybe that's a React or StackBlitz thing? I don't have the time to debug it at the moment. Link to comment Share on other sites More sharing options...
OSUblake Posted February 19, 2020 Share Posted February 19, 2020 1 hour ago, ZachSaucier said: I think my logic is correct in the demo above but weirdly if you click while the new list is fading in fadeInTween is being reported as undefined when it definitely should be defined. With hooks, a lot of logic that should work, doesn't. You shouldn't use normal variables as they won't be the same on the next render. Just one of the reasons I find hooks to be very difficult to work with when it comes to animations. // BAD let fadeOutTween; ... fadeOutTween = gsap.to(...) // GOOD let fadeOutTween = useRef(); ... fadeOutTween.current = gsap.to(...); 2 Link to comment Share on other sites More sharing options...
TomSES Posted February 19, 2020 Author Share Posted February 19, 2020 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. 👍 Link to comment Share on other sites More sharing options...
ZachSaucier Posted February 19, 2020 Share Posted February 19, 2020 2 hours ago, OSUblake said: With hooks, a lot of logic that should work, doesn't. You shouldn't use normal variables as they won't be the same on the next render. Just one of the reasons I find hooks to be very difficult to work with when it comes to animations. Ah, I see. Working version here: https://stackblitz.com/edit/gsap-react-listobject-stagger-wceosg?file=index.js Link to comment Share on other sites More sharing options...
TomSES Posted February 20, 2020 Author Share Posted February 20, 2020 This is brilliant! Thanks for your help. Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now