React: Try FadeIn + Redirect = cool transitions

Plus: how to hide fun stuff behind slow fade-ins …

Image for post
Image for post
my son at Glacier National Park. It’s now the cover photo of my portfolio.

A few months ago, I created a React App portfolio website. I gave it a few pages:

  • Home
  • Projects
  • Resume
  • Blog Posts
  • About

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?

Redirect

To do this, you give your component an initial local state of redirect:false.

Then you add the lifecycle method componentDidMount() . This fires when … as you guessed, your component is mounted on to the DOM.

(What’s the DOM? Websites are written in HTML and CSS. Web browsers convert that code into what we see on the web. Browsers also create a model of the page called the Document Object Model, which allows JavaScript to access elements on the page as objects. When we write JavaScript, we’re not changing the site’s HTML/CSS directly. Instead, we’re altering the DOM. The browser then uses the updated DOM to update the site’s HTML/ CSS)

adding redirect to componentDidMount()
adding redirect to componentDidMount()

In the code above, we are using JavaScript’s Window setTimeout() method, which takes a callback function. Our callback changes state to 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:

Image for post
Image for post

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 …

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 visible to false after 3 seconds:

Image for post
Image for post

Inside render, we add a new line to our return, like so:

Image for post
Image for post

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 …

Image for post
Image for post

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

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

Image for post
Image for post

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

In case you missed it: Algorithms 101: Count Primes in JavaScript/ The Sieve of Erathosthenes

JavaScript In Plain English

New JavaScript + Web Development articles every day.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch

Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore

Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store