George Ilidis

Digital Marketer. WordPress Developer.

  • EN
Home / Genesis Framework / Animate (fadeIn) Genesis Site Container On Page Load

Animate (fadeIn) Genesis Site Container On Page Load

9 March 2019 by George Ilidis Leave a Comment

Genesis Framework Animations

Did you notice the fadeIn animation in this website when you came in? It’s the same one you can find in the Infinity Pro theme by StudioPress. You can easily see what I mean if you navigate from page to page in this website or if you reload this page.

Today I’ll show you how you can add this fadeIn (or anything else) animation to any Genesis website.

Here are the steps we will follow to achieve this:

1. Add some extra CSS classes to the “.site-container”.
2. Create some basic CSS3 animations using Keyframes.

Add the extra classes to the “.site-container”

In this example we will be adding the classes “animate-site-container” and “fadeIn”.

In the CSS below you will find an animation called “fadeInUp” too. Try replacing “fadeIn” with “fadeInUp” in the code above to change the effect.

Create the CSS animations

You can use any other animation you want, but I suggest you go with the fadeIn one for this kind of effect. I think it’s the only one that won’t look wierd on page load.

Attributes like animation-delay and animation-duration are there for you to edit them. Change the number in seconds (ex. 1.4s) to see how these will affect the whole animation.

Feel free to share the link of the website you’ve implemented this effect in the comments below!

About George Ilidis

George is a Digital Marketer & WordPress Developer. He builds websites using WordPress and the Genesis Framework and helps businesses grow online by optimizing and promoting websites.

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Want to work with me? Start your project today.
Copyright © 2018 George Ilidis.
Custom built on WordPress.

Navigation

  • Home /Get an overview of what I offer.
  • About /You can skip this. It’s boring stuff.
  • Work /Discover a selection of my projects.
  • Blog /Learn how to help your business grow.
  • Contact /Let’s talk about anything you want!
  • EN

Get in touch

E.: hello@ilidisg.com
T.: (0030) 6973 074 574