Home » Our Blog » Why You Should Add Animations and Page Transitions to Your Website
October 19, 2018

Why You Should Add Animations and Page Transitions to Your Website

how to use page transitions and animations

Have you noticed websites abandoning static homepages for transitions like the popular fade in? Why is this? Animated pages and page transitions provide a better user experience. Even fading in can give the site a different feel. Page transitions are visually appealing and interactive. This site is a great way to find the perfect transition for your content.

How to Incorporate Page Transitions

There are two ways to add transitions to a page. One is using the content management system’s options for adding animations. The other choice is to code the transitions.

Use your Content Management System

The easiest way to add animations is to use plugins or modules. There are tons of free WordPress plugins that allow you to add transitions without any knowledge of code. Here are ten. Always check your platform for plugins. It will help you avoid coding. Google “add page transitions to” and the name of your platform to easily find the best for your site.

But, if you Must

Coding isn’t actually too hard. In fact, some platforms (we’re looking at you, Magento) require coding for even the simplest of additions. It’s usually just a matter of copying and pasting, or learning the basics and meticulously adding them into the background of your editor.

The first step, if you haven’t played around in the background, is to watch tutorial videos about adding code to your specific platform. Here’s how it’s done in WordPress.


Use YouTube to look up how to embed html code into your platform. Then have at it! We really like the transition Medium uses. It’s slick, modern and won’t slow your speed too much. This great article includes the code and is the perfect way to practice on your own site—just create a post and play around. Try substituting things to see what you get. Have fun trying out some different ideas here and again, get comfortable by experimenting. Who knows? That beautiful mistake could be the next big page transition trend.

Keep in Mind: Use Animations to Navigate not to Impress

Carefully pick and choose where you use animations and page transitions. Start with your homepage but don’t start with every page. Too many animations slow down page loading time. “The way to improve the load time is to cheat a bit! Cheat by making the user think it takes less time because they are distracted by what’s happening on the screen. Cheat by loading the content ahead of time and animating the transition” (CSS-tricks).

Parallax scrolling is still popular and elements scrolling at different speeds creates depth.

There’s a reason those huge videos aren’t showing up on home pages anymore: they make sites slow. Humans have zero attention span. According to Kissmetrics, 47% of visitors expect a website to load in fewer than two seconds. Additionally, 40% of visitors will leave the website if it takes more than 3 seconds to load. Take a pass on the large videos and instead, opt for animated gifs and css/js animations to keep load times low.

Update Your Site With Digital Firefly Marketing

Now that you know about page transitions, let us help you decide how to use them. Get a free design and development audit to get expert feedback on how your site can load quickly while offering a texturized, interactive experience through animations.

About the expert: Veronica Shelton

Veronica Shelton is the DFM graphic designer. She is based in our Sacramento office. Veronica studied at the Graphic Design program at Sacramento State, which is one of the most prestigious programs in Northern California. She received expert training in critical thinking, gestalt, concept development, color theory and typography. She worked on a wide range of projects including branding, publication design and web design layout. She has been designing professionally since 2010 after receiving her BS Graphic Design. Veronica’s design style is just like her personality, she’s, fun, creative and full of life. The aesthetic that she creates is truly an extension of herself. She creates bold and energetic designs that grab your attention and invite you to stay while and soak in the details.

Ready to create a beautiful website?

Get a free Design Audit

Complete the form to download

Don’t you wish you could pay for your morning coffee with just an email address?

Congrats on the new ebook
Thanks for downloading it.

Digital Firefly Marketing is excited about our collection of eBooks.

That’s because they are conceptualized, planned and written by us drawing from our expertise and experience. That means you get information that doesn’t just sound good, but has been used to actually help our clients.

Be sure to check out all of our eBooks and contact us if you’d like help developing your website or building your marketing strategy.

For now, pour yourself a beverage and tuck into our user-friendly eBooks to learn how you can improve your website’s visibility.

Visit Our Blog

No, Thanks. I’ll Check out Later.