10 CSS & JavaScript Snippets for Creating Page Transition Effects

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 while 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:

Vue.js Variety by Tim Rijkse

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 and slideUp).

See the Pen Vue2 page transitions with GSAP by Tim Rijkse

Old School Television by Mergim Ujkani

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).

See the Pen Page Transitions by Mergim Ujkani

Morphing SVG by Arsen Zbidniakov

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.

See the Pen Page Transition Loader by Arsen Zbidniakov

Speedy Transition with Preloader by John Heiner

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.

See the Pen Page Transition with Loader by John Heiner

Thumbnail to Full Page by Steve Gardner

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.

See the Pen Thumbnail to fullscreen page transition by Steve Gardner

Wipe it Clean by TOMAZKI

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.

See the Pen Page transition CSS3 by TOMAZKI

Cubic Bezier with GSAP by Maciej Siwanowicz

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.

See the Pen GSAP Cubic bezier page transition by Maciej Siwanowicz

Splish-Splash by Jonas Sandstedt

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.

See the Pen Responsive bodymovin modal / page transition by Jonas Sandstedt

There’s a Glitch by nclud

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.

See the Pen Canvas Glitch Intro by nclud team

3D Cubes by Hubert Warzycha

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.

See the Pen 3D Cube Page Transition by Hubert Warzycha

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 CSS, along with the right JavaScript library, can produce compelling visuals. When used responsibly, transitions can a fun way to enhance UX.

More CSS Effects Snippets