Using the new Divi Theme animations all on 1 page is a bad idea!

With version 3.0.72 ( updated 9-5-2017 ) Divi got some cool animation upgrades which means that you can now add, and customize, animations to any Divi section, row or module. Animations can add some great eye candy and when used sparingly and subtly can really help with the overall feel of your website.

So, this post is my way of quickly testing out this new animation feature in a totally non-subtle and non-sparingly way. If your own website is looking anything like this animation test page then you probably need to rethink your animations a bit

If you would prefer to see how these new animation features should be used take a look at a much more tasteful use of the new animations on the official Divi animations demo page over at Elegant Themes.

New Divi Animation Settings

Animation Repeat – By default, animations are only run once to reveal the element. However, you can choose to have the animation repeat if you would like to continually draw attention to the item. This could be useful for call to action buttons.

Animation Direction – Every animation style has been created in a way to allows for different directional queues. You can have your item animate from the top, bottom left or right and the style will automatically adjust itself.

Animation Duration – By default, animations durations are set to 1 second, however, you can speed up or slow down the duration with ease.

Animation Delay – Animations automatically play as soon as the animated element enters your browser’s viewport when scrolling down the page. Adding a delay will increase the time it takes before the animation occurs once the item is visible on the screen. By combining different module animations using staggered delays, you can create some really awesome effects.

Animation Intensity – When you adjust the intensity of an animation, it effects how drastic the movement of the item is during the animation. Divi does all the complicated math in the background for you. All you need to do is increase the slider to make your animations more snappy, or decrease the slider to make them more subtle!

Animation Starting Opacity – By default, all animations fade in from a starting opacity of 0. This can be adjusted to minimize or remove the fading effect.

Animation Speed Curve – Here you can adjust the speed curve that is used during the animation, each of which gives the animation a slightly different feel.

Do you have any great examples of Divi sites using the new animation features? drop me a line via the contact form and your site may make it into the Divi showcase gallery.

Elegant Themes' Black Friday/Cyber Monday sale is still on if you want 25% discount! Dismiss

Pin It on Pinterest

By continuing to use the site, you agree to the use of cookies. more information

The cookie settings on this website are set to "allow cookies" to give you the best browsing experience possible. If you continue to use this website without changing your cookie settings or you click "Accept" below then you are consenting to this.