Have you played with the new Divi Scrolling Effects?
The awesome new Divi feature introduced in Divi 4.3 allows us to add advanced (and fun!) animations which react to the page scroll. You can add the Scrolling Effects to any Section, Row or Module and the animation is based on how fast and in which direction your website visitor is scrolling.
So in this short post I’ve got two tips for you:
Tip no. 1 – use it wisely!
Don not go overboard with Scrolling Effect!
Tip no. 2 – use Column if you’d like to add transformation on hover
I’ve been playing with the new effects and the one obstacle I found was how it might not play nicely with the Transform options. I created an “Overlapping Images” section and what I like to do with images is to add a subtle transformation on hover (scale it down or up, rotate a little bit). The problem was that when the Scrolling Effect is used on Image module, adding the Transform settings on hover wouldn’t take into account a different position the Image might be in (depending on the sroll offset), causing the not-so-pretty jump on hover and removing the transformation added through the Scroll Effects settings.
The solution? Add hover Transform settings to Column instead of the Module. It works really well with Images, take a look at the demo page! And if you are a Divi Lover subscriber, download this nice Overlapping Images layout with sleek scroll (and hover!) effects, which you can simply import and use on your projects!
Free Resources for Divi Lovers
Join our newsletter to get the good stuff!
Sign up to download
Get access to this layout and all the free resources made exclusively for our subscribers!
Fill the signup form and if you’re on the list it’ll get you straight to the download page!