Have you ever wondered why achieving this style of gorgeous transitions on your website seems impossible?
Typically, browser page loads lack animations and often look quite bland. Unfortunately, manually coding each animation while avoiding page refreshes is not only challenging but can also negatively impact SEO since all content would need to be dynamically rendered.
Understanding the Web Transitions API
Traditional page loads typically feel abrupt and lack visual appeal. The web transitions API addresses this limitation by introducing smooth animations between page transitions. This not only enhances the user experience but also improves perceived website performance.
Getting Started with Web Transitions API
Utilizing this API on your website is straightforward. Simply add the following CSS snippet to all your pages. If you’re using WordPress, like ByteKnitter, you can do this by navigating to the Customize section and then Additional CSS:
@view-transition {
navigation: auto;
}Now, all your page transitions will have a fade effect, which is nice, but we can take it a step further. By setting the same “view transition name” for two elements across different pages, these elements will morph together during the transition, resulting in smooth and stunning animations.
Step-by-Step Guide to Implementing Morph Transitions in Elementor
To achieve this effect, you’ll need to add the following CSS property to the elements you want to morph together on both pages. For instance, you can apply this to the featured image on your blog page’s post card and the featured image in the post template. The name for this property has to be unique, so it’s a good idea to use the unique post ID that WordPress generates for each of your posts. But how can you incorporate that into your CSS styles?
Since we’re focusing on Elementor in this post, it’s important to note that Elementor doesn’t allow the use of dynamic tags in the Custom Styles section. However, you can still achieve this by using the Attributes section under Advanced.
As shown in the image, you can add additional attributes to your element by typing the property name, followed by a pipe character |, and then its value. Since we want to add some CSS style, we would need to add the style attribute. Then, you can include the CSS property, which is named view-transition-name, followed by a colon (:), and assign it a base name—let’s use “image-zoom” for this example:
style|view-transition-name:image-zoomSo to add this CSS property, select the dynamic tags option in the Attributes section and choose the post ID. Paste the entire code into the “Before” field, which will append the post ID to the base name “image-zoom”. This means your element will have a name like “image-zoom123”.
Repeat this process for the element on the second page so that these share the same view transition name, enabling the browser to morph them.
Example: Morphing Featured Images
By following these steps, you can create a visually stunning transition where the featured image on your blog post morphs into the featured image on the post template when navigating between pages.
Preventing Inconsistencies with Delayed Page Transitions
Sometimes the transitions don’t work because the new page that is being loaded is visible to the user before the element that we want to morph is rendered. The Web Transition API also allows website designers to delay this transition and the entire page load so that the elements that morph together are ready and rendered. If you take a look at the MDN document for this, it is mentioned that a link tag can be added to the headers of the page to define the element we need to be rendered before the new page is shown to the user. To add this to your website’s headers, my suggestion is to write a simple PHP snippet like below and use the free WPCode plugin to add it to your website.
function add_expect_link_to_blog_pages() {
if (is_single()) {
echo '<link rel="expect" href="#featured-image" blocking="render" />';
} else if (is_category() || is_tag() || is_home() || is_search() || is_page('account')) {
echo '<link rel="expect" href="#loaded" blocking="render" />';
}
}
add_action('wp_head', 'add_expect_link_to_blog_pages');Our snippet first checks if we are in a blog post by using the is_single() function. If we are, it adds the header for the element with the tag featured-image. So now when someone visits our website, their browser will wait a little to ensure that the featured-image element is rendered completely and then starts the transition.
Otherwise, if we are either in the category archive, the tag archive, the blog posts page, the search results, or the account page (you can put your page’s permalink between those quotations), the browser will wait for an element with the ID loaded, which can be an empty container that we add at the bottom of these pages in Elementor.
Conclusion
With these steps, you can effortlessly implement beautiful, seamless transitions on your Elementor-powered website using the new Page Transitions API. This method allows for a more dynamic and engaging user experience without sacrificing SEO or resorting to complex coding. Start enhancing your website’s visual appeal today by following this simple guide!
Useful links
The API documentation on MDN: https://developer.mozilla.org/en-US/docs/Web/API/View_Transitions_API
A Google IO speech about this API: https://www.youtube.com/watch?v=JCJUPJ_zDQ4