Time passes so quickly when working on websites doesn’t it. Over the last six months I’ve been doing a lot with the Divi theme from Elegant Themes… writing plugins and making sires using it for my simpler projects.

Recently I had the need to animate in blocks of text, headings and other miscellaneous items. Sadly only certain Divi modules have the nice user friendly dropdown which allows items to be animated in. so I went digging in the CSS and found two key classes you can add to seemingly any element to get them to animate in as the page scrolls down to where they are placed.

First you need to add the class ‘et-waypoint’ to the item you’d like to animate in. This will both hide the item and tell Divi that it will do something when it comes into view.

The second class is the actual animation you’d like to use. These are self explanatory really.. see the list below:

  • et_pb_animation_fade_in
  • et_pb_animation_bottom
  • et_pb_animation_top
  • et_pb_animation_right
  • et_pb_animation_left

You can add these classes as class=”” to any element you like (I have tried with headings so far and it works well) using the text view of the WYSIWYG or to make life easier and more user friendly you can add them to modules by clicking on the Custom CSS tab and adding accordingly.

Screen Shot 2016-04-20 at 10.14.58

I’ve started writing Divi plugins and have listed a couple on Elegant Marketplace, a theme/plugin store for all things Divi. Take a look at my latest development Divi Injector

Hope this helps.. by all means comment and let me know if you’d like anything else written along these lines and I’d be happy to put a tutorial together.

A donate button!

Be the first to hear about new products/updates!

This is a mailing list for those people interested in being told when we release a new product (Divi plugin or Theme).

We shall also use this list to let you know about product updates and releases.

You have Successfully Subscribed!