Repurposing a CSS Transition

Building a multi-media webpage, I needed to create a page transition to smoothly go from a colorful wallpaper to a blank white page. There are dozens of beautiful page transitions online to use, but finding one to do exactly what you need isn’t always possible. So we’re going to play with repurposing an existing transition to fit our website.

So this transition ripples outward from the link you click on, then opens up onto another page. It doesn’t actually change the page you’re on but it changes the content of the page. That’s something we’ll have to fix for our page since we’re looking to get to a separate page.

For starters, we’ll change the anchor tag to a button so that the transition is triggered by pressing a button. Then we’ll change the color from green to white to better fit our site. Then we’ll set it up to turn the page blank white to better suit our transition.

To suit our website, I want to let the ripple run its course, then on a blank white page the content of our next page can fade in on load. To let the ripple run its course but still load the next page, we’ll set up a delayed function to run on click.

With some tweaking, we can get the timing right. The ripple animation will finish, then the next page will load. To finish it up, we’ll add a simple fade animation to run on load for the second page.

And with that we have a page transition that uses the core animation from the code pen, then adapts it to better fit our own site. The code pen for the original animation is at https://codepen.io/djmarland/pen/CxEbK.