Jump to content
Search Community

Animate React component on unmount

medmedmed75 test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Hello everyone! 

 

I've got some troubles to make my transition between 3 differents components. The logic is pretty simple : I just want to go from opacity 0 to 1 when component is being mounted (easy with hooks / stateless components, or componentDidMount / react class) and to go from opacity 1 to 0 when the component is being umounted. Neither the useEffect nor the componentWillUnmount are working for this transition. I admit that's a pretty simple transition but impossible to do when component is unmount. 

 

Here is the function fired when Homepage, About Us or Corporate are clicked : 

 

	toggleBetweenAllPages = () => {
		const page = this.props.toggle.page
		if (page === "homepage") {
			return <Homepage />
		}  else if (page === "corporate") {
			return <Contact />
		} else if (page === "about us") {
			return <Infos />
		}
	}

Hope this is clear and thanks in advance for your help! :) 

Link to comment
Share on other sites

7 minutes ago, medmedmed75 said:

Finally, RTG "just" timeout the unmount of the component?  

 

What's "RTG" mean? And how would you use timeout to unmount a component. Can you make a demo?

 

7 minutes ago, medmedmed75 said:

Yes, just saw that before. I thought it was a bit complicated to understand how to apply it. 

 

The demo I posted shows how to use it with GSAP.

Link to comment
Share on other sites

@medmedmed75 The timeout is a specific amount of time in ms before the component is actually unmounted. When using GSAP is better to use the addEndListener method in order to use the done callback in GSAP's onComplete event listener, with that you can be sure to unmount the component after the animation is complete.

 

It seems to me that you want to animate between different components using React Router perhaps? Is not very clear but I'm inclined to believe so. If that is the case check the GSAP and React Guide and go to the last section, you'll see a title Animating Route Changes, there is a live editable sample there as well showing how to use GSAP with React Router DOM and RTG in order to animate route changes.

 

Finally @OSUblake RTG stands for React Transitiong Group, KUWTA (Keep Up With The Acronyms) :D, here is a crash course:

 

 

HT!*3 (Happy Tweening!!!) :D

  • Haha 4
Link to comment
Share on other sites

3 hours ago, Rodrigo said:

Finally @OSUblake RTG stands for React Transitiong Group, KUWTA (Keep Up With The Acronyms) :D

 

I can't believe how RTG went right over my head even though I was talking about it. I even tried googling it. ?

 

3 hours ago, Rodrigo said:

here is a crash course:

 

I knew what all of those meant except for PC. It's Press Conference.

https://en.wikiquote.org/wiki/Good_Morning,_Vietnam#Airman_First_Class_Adrian_Cronauer

https://en.wikipedia.org/wiki/News_conference

 

  • Haha 2
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...