Divi – Animate normal content, not just images

April 20, 2016 | Divi, FREE!, PHP, Themes, Time Savers, Tutorials, Wordpress | 28 comments

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!

28 Comments

  1. bestigorek

    Thanks Sean!!!

    Reply
  2. Pierre

    Hi Sean 🙂 !
    Thanks for this cool share 🙂 !!

    Amicably,

    Pierre.

    Reply
  3. Dominic de Souza

    This is great! I’ve been hoping someone would come up with a list like this for months.

    Any magical chance that this could be added to Injector or as a plugin that makes it show up as a toggle for modules? I’m surprised that this hasn’t been done by Elegant Themes already; plenty of us want to animate more than just images.

    Also with the plugin, being able to customize the lazy load delay would be nice.

    Reply
    • Sean Barton

      Thanks Dominic,

      Sadly adding to existing modules isn’t easily possible because ET don’t allow the extension of modules.. only to override them which would be a nightmare to support. I also don’t know what’s coming in V3 of Divi so will need to review it there.

      Glad you like this feature though.. it’s quick and easy and very effective. Ideas for more plugins and module welcome! 🙂

      ta
      S

      Reply
  4. TriSha Bailey

    Fabulous, Sean! Is there is a way to change the speed of the slide in animation?
    🙂

    Reply
    • Sean Barton

      No problem. There isn’t I’m afraid. The animation is default within Divi and these classes just tap into that. Unless there is a way to change the overall speed but it would be sitewide

      Reply
  5. Alfredo

    Thank you! This is really great, just what I was searching for.

    Reply
  6. Neil Jackson

    Thanks for this Sean, I’ve used ‘set-waypoint et_pb_animation_fade_in’ to get my text to fade in, but is there a way to delay the fade by adding anything to this code or is this the limitations of the theme?

    Reply
    • Sean Barton

      Sadly not Neil, It’s a limitation of the theme. The classes trigger the inbuilt JS within Divi which service the feature

      Reply
      • Neil Jackson

        Thanks anyway for the swift reply Sean. I found the article really useful all the same.

        Reply
  7. Shannon

    Thank you so much for this – so simple and so awesome. 🙂

    Reply
  8. The Pencilneck

    Awesome tip! Is there any way to delay the appearance of a section/row/module, and assign a value to the delay? (eg: wait 50 secs before showing). I want to play a video and have the buy button appear when the video reveal the price.

    Thanks!
    Owen

    Reply
    • Sean Barton

      Sadly not. This system is built into Divi so these classes just trigger them. However it would be easy enough to write some JS for you that will show a button after so many seconds if you like.

      Reply
      • OWEN GARRATT

        You, ah, wouldn’t have any ideas ho could do something like that, would you? And what it might cost?

        Reply
        • Sean Barton

          I could.. but it would take a few hours I expect. email me and we can discuss.

          Reply
  9. Brian

    It doesn’t look like this can be downloaded any longer. Thanks for the other Divi plugins; I have purchased most of them!

    Reply
    • Sean Barton

      It’s not downloadable. It’s just a code sample

      Reply
  10. Rogério

    How do animations run on smarthphone? There is no place on the internet to talk about it = / It is a waste not to enjoy these animations on smartphones. Can someone help?

    Reply
    • Andreas

      Hi! I’m wondering as well. I think JS is mostly disabled on smartphones, let’s hope ET implements CSS animations in the future.

      Reply
  11. Jamie

    This was awesome, thank you!
    Do you have any idea how to do this with the header module’s “scroll down” arrow? I’d like it inside the Text module if possible – I tried copy/pasting the arrow code but get a console error that a function is not recognized

    Reply
  12. John-Pierre Cornelissen

    Thanks! This is a great tip. But really, Elegant should just put that animation drop down in the settings of every section, row and module.

    Reply
  13. raoultancrede

    Hi !
    This trick is just awesome ! And so simple…

    Where do you think I have to search in the code to change the default speed of the effects ?
    For exemple, I tried a fadein effect on a block but it’s only 1s.

    Thanks

    Reply
    • Sean Barton

      Sadly the speed is defined within Divi and we don’t have access to it 🙁

      Reply
  14. Stephanie

    Just what I was looking for! Google search to Fade In text…less than 2 min! b00m! Thanks Sean!

    Reply
  15. masirwin

    This was awesome, thank you!

    Reply

Trackbacks/Pingbacks

  1. Animate any Divi Elements - myFreeWebSpot - […] classes that you can add to any Divi element in order to animate it. Sean’s article can be found here…

Leave a Reply

Divi United

About this site and Sean Barton

Picture of Sean
Sean Barton is a Freelance PHP Website Developer in Crewe, Cheshire. He is a Wordpress and CMS/Framework specialist.
This site was set up in 2008 as a tutorial and scripting resource for the PHP language and Wordpress.
Find out more about Sean on the About Me page or use the Hire Me page to get in touch. For more information about Sean's work take a look at the Portfolio

Our Services

  • Wordpress plugin/theme development
  • Divi specialist
  • Ecommerce (Woocommerce, WPSC, Shopify, Magento)
  • PSD to Wordpress theme conversion (Responsive)
  • Website design work (Banners, Logos, Full Site, etc)
  • Website analysis (security, usability, SEO)
  • API Integrations (InfusionSoft, SalesForce, Ontraport, Customer Thermometer, etc..)
  • Wordpress consultancy & expert advice
  • Crisis support
  • Website hosting

The main services offered are Wordpress based although we do a great deal of technical programming for bespoke systems. From troubleshooting, extending frameworks, finding bugs to writing them from scratch.

Find out more by looking through our past projects or get a quote.

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!