Jump to content
Search Community

[Solved] React state change causing animations to suspend

modulareverything test
Moderator Tag

Recommended Posts

I have a series of divs each with a hover function where hovering in causes an animation to play, and out causes it to reverse.

 

I also have a `viewAll` state which allows you to expand the amount of divs that you can currently see by pressing a button.

 

A weird bug has been reported where if you hover over one of the divs and then press the viewAll button, the animation will pause at whatever progress it was currently at. Hovering over that div again will cause the animation to play to the end, and out will cause it to reverse back to whatever progress of the animation it was in when you clicked expand.

Link to comment
Share on other sites

Hi,

 

It's really difficult to debug a live site. The issue is there as you mentioned and the code you posted corresponds to the staff wrapper and not the single person component.

 

My best guess is that when the show all element is clicked, which updates the state, re-renders the component and it's child <StaffProfile /> components. At that point, perhaps a new GSAP instance is created which overrides the existing one causing the issue we're seeing. The thing is that GSAP records the initial values of the element and creates the new instance using those and the target values passed in the config object, which is why you see this problem. I can guarantee you that the GSAP instance's progress goes from 0 to 1 as expected, the problem are the values being iterated by GSAP.

 

There are a few approaches to this. One is to kill the animations, or use clearProps on subsequent re-renders to reset the styles of the elements. Another option could be to create a quick GSAP instance (also on  re-render) that sets the opacity of the affected elements to 0 and use an onComplete callback to re-create the original GSAP instance that works on the hover event. A third one I can think of is pass the viewAll value as a prop to the <StaffProfile /> components and if it's true reset the styles of the elements and after that create the animations again. But as you can see the trick is in clearing the styles before creating the GSAP instances again.

 

You can check the clearProps property in the CSSPlugin docs (scroll to the end of the page):

https://greensock.com/docs/v3/GSAP/CorePlugins/CSSPlugin

 

If possible, please provide a small snippet of the <StaffProfile /> component in order to see what's going on in there.

 

Finally, good job, the app looks really nice!!!

 

Happy Tweening!!!

  • Like 3
Link to comment
Share on other sites

18 hours ago, Rodrigo said:

If possible, please provide a small snippet of the <StaffProfile /> component in order to see what's going on in there.

 

Thanks for taking the time to reply @Rodrigo — your points are really helpful and certainly give me something to work with today as I was at a total loss yesterday!

 

And thanks for the kind words :-) its been a fun design and build, this one.

 

EDIT: Solved!

 

Adding clearProps: 'opacity', to showMoreClick() seems to work! Thanks for the help @Rodrigo

  • Like 1
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...