React: Try FadeIn + Redirect = cool transitions
Plus: how to hide fun stuff behind slow fade-ins …
A few months ago, I created a React App portfolio website. I gave it a few pages:
- Blog Posts
On the home page, I added some basic welcome text, a large photo and a link to my portfolio page. Then I began to wonder: why force visitors to enter through the home page, when the page I really want them to see is the portfolio page?
I considered dumping the home page altogether, but it is kind of nice to have somewhere to start.
So how can you have a lovely home page without making visitors feel like it’s an unnecessary pit stop on the way to a more popular page?
One solution: have them start on the home page, and then use setTimeout() to automatically redirect them to another page.
To do this, you give your component an initial local state of
Then you add the lifecycle method
componentDidMount() . This fires when … as you guessed, your component is mounted on to the DOM.
redirect: true after a wait time of 4000 milliseconds (4 seconds).
Then, when our component unmounts, we remove the timer.
Inside our render method, what we return is based on the
this.state.redirect. If true, we use react-dom’s Redirect to reroute the user to another page; otherwise, we render the content for the current page:
This is cool, but the redirect is sort of … sudden. If I didn’t know better, I’d think the website is broken. (Apologies for poor video embed quality below; for some reason Loom does not play well with Medium).
Fade Out …
Once I got this working, I thought it would look a lot better if I could fade the home page just before the redirect. For good measure, I thought I’d also (very quickly) fade the home page in.
So I added
visible to state, with an initial value of false. Then, on componentDidMount(), I changed the visible to true and set a timer so that visible would reset
false after 3 seconds:
Inside render, we add a new line to our return, like so:
Our new line, 32, changes the className of the div. If the div is supposed to be visible, the className will be
fadeIn — otherwise, it will be
fadeOut. We could use any names we want here, but it’s a good practice to choose names directly related to the desired effect.
Add CSS …
Now, in our App.css file, we just have to add instructions for how to render components with the new classNames:
On line 139, we’re saying, when you see the className
.fadeOut, set opacity to 0, and make that transition happen over a period of 1 second.
On line 144, we’re doing the same in reverse except we’re having the transition take place over half a second. (If we make it take longer, our visitors might think our site is broken, because it will look blank, even if just for one second.
Note: I have no idea why the time .5s must be included twice? for fadeIn — if you do, please leave a comment!
Voila! Our transition looks pretty cool now. You can see it work here.
And now, for the fun stuff
When you’re looking for a job and working way too much on your portfolio site you need a sense of humor. So I decided to showcase my management skills with a video of me trying to direct my then-toddler kids as they teamed up to try to roll a massive snowball across a field. (Seriously! I had to motivate, delegate, etc …).
I should, of course, put this front-and-center. I really should. But I’m also trying to come across as professional. How to balance my need to amuse myself with my need to make a professional website? Aha! What about …
A very slow fade-in
I added the video to the bottom of my About page. Instead of styling it with the className
fadeIn, I made a new className
fadeInSlow, which I styled like so:
So, in addition to being buried at the bottom of the page, the element is invisible for the first 10 seconds. Which means most people will never notice it.
If you want to see it (and my amazing management skills) in action, here’s the page (scroll down).
Now that you know my secret …shhh!
© Joan Indiana Lyness 2019