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).
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.
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.
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.
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.
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 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 CSS, along with the right JavaScript library, can produce compelling visuals. When used responsibly, transitions can a fun way to enhance UX.
There are a number of reasons why WordPress has the biggest market share among content management systems (CMS). For some developers, it’s the massive ecosystem of available themes and plugins that draws them in. Others may cherish the opportunity to create their own custom addons.
The most common thread here is flexibility. WordPress is capable of powering virtually any type of website one imagines. Everything from a simple blog to an eCommerce shop and beyond are possible.
But, as with all technology, there is a certain level of responsibility that comes with using WordPress. It’s something to consider when choosing how you want to build a website. Because, while the CMS is capable of great things, there are scenarios where it may not be the right option.
Let’s take a closer look at some times when it may be wise to steer clear of WordPress – or any CMS, for that matter.
When There’s No One to Maintain the Website
As a designer who has inherited a number of WordPress websites, I’ve seen it before: a website was built several years ago and hasn’t been touched since. A client knows their website needs some work, but doesn’t realize the depth of the underlying problems.
There can be a myriad of issues involved. For one, severely outdated versions of WordPress core, themes and plugins. This is a potential nightmare in terms of security. And it’s not uncommon to find that a site in this situation has been compromised.
Upgrading the software isn’t always so straightforward, either. Some items may have been abandoned, or have to be updated a version at a time to avoid complications.
Unfortunately for the client, there could be a significant cost in cleaning this up. All because their website wasn’t properly maintained in the first place.
The trouble is, most website owners aren’t going to know about the importance of WordPress maintenance unless a designer informs them. Too often, designers simply hand over the keys without a whole lot of instruction. But even when they do, clients may either ignore the advice or forget about it.
The truth is that WordPress does need to be regularly maintained. For the sake of both security and functionality, updates need to be applied in a timely manner.
Therefore, if an organization doesn’t have anyone (or are unwilling to pay someone) to maintain their website, it may be better off not utilizing WordPress. In these situations, a static HTML website or even a managed proprietary CMS could be more sustainable options.
And yes, WordPress can be auto-updated. However, it’s still important to have someone knowledgeable regularly checking in on the site. Otherwise, something could break and be left that way indefinitely.
Your Project Doesn’t Need Content Management Functionality
Having new and ever-changing content is a great way to keep users engaged. Yet not every organization is going to make that commitment. Sometimes there’s no budget for original content, other times there simply may not be enough time to create it.
Of course, one of the key selling points of WordPress is the ability to create and organize content with ease. Whether that’s building a slick page layout in the Gutenberg block editor or adding an ongoing archive of recipes, this is what a CMS is built for.
But what if your project doesn’t require any of this? The traditional “brochure-style” website is still alive and well. Their purpose is to supply users with the information they need and way to get in touch. Beyond that, there may not be much call for the kinds of functionality a CMS provides.
In this case, implementing WordPress may be overkill. First, there’s the potential for higher startup costs – especially if a custom-built theme is involved. Then there are also the aforementioned maintenance requirements.
If there’s not much content and it’s not likely to change, a CMS is completely optional.
You (or Your Client) Have No Desire to Learn the Inner Workings of a CMS
Over its many releases, WordPress has made big strides in usability. It has had a keen focus on newcomers. But for some users the dashboard still offers a lot of clutter.
Even a website that looks simple enough on the front end can be complex behind the scenes. Users have to know where different types of content reside. Beyond pages and posts, there could be any number of custom post types implemented. Then there are plugins like photo galleries, sliders and shopping carts to navigate.
For a non-designer to manage content effectively within WordPress, it often takes some training. In most cases, I’ve found clients to be very receptive to learning. But there are also a few that have very little desire to dig in.
These folks may benefit more from a system that is dead-simple and more limited in scope. One that offers front-end content editing by default and has few settings to tweak.
WordPress offers users the world. However, it’s important to remember that some people prefer to stay within their own backyard.
With a Great CMS Comes Great Responsibility
In some ways, I feel a bit silly in discussing reasons not to use WordPress. After all, it’s a tool I use almost exclusively.
But I also think it’s healthy to talk about the responsibilities that come along with using it. While the software is free of charge, it does require a few things from us:
Regular maintenance;
A willingness to learn how to use it;
That may not seem like an awful lot. But in reality, it is a bridge too far for some people. And there are also times when the functionality WordPress offers just isn’t necessary. In those cases, there’s nothing wrong with adopting the simplest solution.
The ability to meet these minimum user requirements is a key to whether or not WordPress is right for your project. If they can’t be met, then you might want to look elsewhere.
During WordCamp Europe this past Wednesday Matt and I gathered to discuss the latest developments of Gutenberg and to share a video with some of the current and upcoming highlights. The video is wonderfully narrated by @beafialho and it was a great opportunity to celebrate all the incredible work that contributors are doing around the globe to improve the editing and customization experience of WordPress. For those that weren’t able to attend live it’s now available for watching online.
Matt also opened a thread for questions on his blog, so be sure to chime in there if you have any!
CSS for Web Vitals – Optimization techniques for improving your site’s Core Web Vitals.
CSS Layout Generator – This online tool will help you craft perfect layouts using either CSS Grid or Flexbox.
Fabius – Free Resume WordPress Theme – A free one-page resume WordPress theme which would be perfect as the personal portfolio of any digital professional.
Universal Icon Set – Download this set of 60 free icons, available in three distinct styles.
Fluid typography – Create text that scales with the window size, so that your headings look great on any screen.
Portfolio Air Free WordPress Theme – A free lightweight portfolio WordPress theme for creatives with a clean and minimal style, and smooth user experience.
How Simple, Classic Design Should Work – How simplifying your “recipe” of features and information is one of the most important steps toward creating the best user experience possible.
Million – A library-agnostic Virtual DOM to serve as the core for JavaScript libraries.
iPhone 12 Clay Mockup – Download a Figma/Sketch compatible mockup of the latest iPhone.
PHP Internals News: Episode 88: Pure Intersection Types
London, UK
Thursday, June 10th 2021, 09:16 BST
In this episode of "PHP Internals News" I talk with George Peter Banyard (Website, Twitter, GitHub, GitLab) about the "Pure Intersection Types" RFC that he has proposed.
Welcome to PHP internals news, a podcast dedicated to explaining the latest developments in the PHP language. This is Episode 88. Today I'm talking with George Peter Banyard about pure intersection types. George, could you please introduce yourself?
George Peter Banyard 0:30
Hello, my name is George Peter Banyard. I work on PHP code development in my free time. And on the PHP Docs.
Derick Rethans 0:36
This RFC is about intersection types. What are intersection types?
George Peter Banyard 0:40
I think the easiest way to explain intersection types is to use something which we already have, which are union types. So union types tells you I want X or Y, whereas intersection types tell you that I want X and Y to be true at the same time. The easiest example I can come up with is a traversable that you want to be countable as well. So traversable and countable. Currently, you can do intersection types in very hacky ways. So you can either create a new interface which extends both traversable and countable, but then all the classes that you want to be using this fashion, you need to make them implement the interface, which might not be possible if you using a library or other things like that. The other very hacky way of doing it is using reference and typed properties. You assign two typed properties by reference, one being traversable, one being countable, and then your actual property, you type alias reference it, with both of these properties. And then my PHP will check: does the property respect type A those reference? If yes, move to the next one. It doesn't respect type B, which basically gives you intersection types.
Derick Rethans 1:44
Yeah, I saw that in the RFC. And I was wondering like, well, people actually do that?
George Peter Banyard 1:49
The only reason I know that is because of Nikita's slide.
Derick Rethans 1:51
The thing is, if it is possible, people will do it, right. And that's how that works.
George Peter Banyard 1:56
Yeah, most of the times.
Derick Rethans 1:57
The RFC isn't actually called intersection types. It's called pure intersection types. What does the word pure do here?
George Peter Banyard 2:05
So the word pure here is not very semantic. But it's more that you cannot mix union types and intersection types together. The reasons for it are mostly technical. One reason is how do you mix and match intersection types and union types? One way is to have like union types take precedence over intersection types, but some people don't like that and want to explicit it grouping all the time. So you need to do parentheses, A intersection B, close parentheses, pipe for the union, and then the other type. But I think the main reason is mostly the variance, like the variance checks for inheritance are already kind of complicated and kind of mind boggling.
Derick Rethans 2:44
Truncated by Planet PHP, read more at the original (another 20384 bytes)
