Jump to content
Search Community

Stagger dynamic list in React

TomSES test
Moderator Tag

Recommended Posts

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

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

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

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

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(...);

 

 

 

 

 

  • Like 2
Link to comment
Share on other sites

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

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...