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
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
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
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
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
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
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
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
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
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
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.
The post 10 CSS & JavaScript Snippets for Creating Page Transition Effects appeared first on Speckyboy Design Magazine.