The act of clicking around a multipage website can become monotonous over time. Adding page transition effects to the mix can help to kick things up a notch. They’re great for keeping the user’s interest as new content loads in, while also maintaining a minimal impact on performance.
With that in mind, here are 10 examples of page transitions that can add a little something special to your next project:
With the help of the Vue.js framework, the examples here sport a quick and slick set of transitions. There’s a nice mix here of basic transitions (fade, zoom) and a few that are a bit unique compared to what we normally see (flipX, flipY, slideUp).
Old School Television
Intentional or not, this transition is reminiscent of an old CRT television being turned off. The colored background shrinks down to a single line, much like what my old TV did after a night of watching MTV (when they still played music, that is). Then, the transition finishes off by reversing the effect (as my TV did when I woke up the next morning).
A circular SVG is used in this transition to add a clock-like effect. The movement adds a cinematic quality that seems like a perfect fit for a multimedia site.
Speedy Transition with Preloader
If you’re going to use page transitions in multiple places throughout your site, then they’d better be quick. That’s what is so cool about this example. There’s a colorful animated preloader that quickly makes way for the content to reveal itself. It’s interesting to look at while not wasting precious time.
Thumbnail to Full Page
This is quite a unique effect, as clicking a thumbnail image transitions to a modal using that very same image as a full-screen background. The effect is a combination of CSS transitions and Angular.js.
Wipe it Clean
A good old wipe effect has been a staple of TV and film transitions for decades. Here, we see a variation of it activated with CSS and a tiny bit of jQuery.
Cubic Bezier with GSAP
GSAP is a library that enables super-fast animations. This example utilizes it to create a “slide up” transition effect, along with some animated background fun.
With a cool “splash” effect, this responsive modal transition will certainly get a user’s attention. It’s quick, colorful and fun. It’s built with Lottie, which brings Adobe After Effects transitions to the web.
There’s a Glitch
There’s something about the dystopian glitch effect that is just timeless. Countless sci-fi shows and movies wouldn’t be the same without it. This example from nclud shows how they built a page transition with all kinds of glitchy-goodness.
Imagine that each page on your site is a panel on a cube (or pentagon, or hexagon, etc). Going to the next page is just flipping that shape around to show the correct panel. That’s kind of the point behind this rotating cube effect that utilizes jQuery and Velocity.js.
Page transitions have come such a long way in recent years. They’ve gone from simple fades and color changes all the way to effects that wouldn’t look out of place in a movie. The combination of CSS3, along with the right JS library can produce compelling visuals. When used in a responsible manner, transitions can a fun way to enhance UX.
- 8 Pure CSS Games You Can Play in Your Browser
- 10 CSS Snippets for Creating Stunning Animated Underline Text Effects
- 10 Incredible Examples of CSS, JS & SVG Logo Design
- 8 Fantastic Pure CSS Border Effect Code Snippets