Divi Scrolling Effects with Transform on Hover

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! As in life: too much of anything is a bad thing! It is very important that you hold back from overdoing the scrolling bit. You don't want to distract your users with too much action and you definitaly do not want to make it harder for them to read your page content. 

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.

before:
after:

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

Access this layout and dozens of other freebies - available exclusively for newsletter subscribers.

New here?

Join the newsletter to unlock the Freebie Library and get weekly Divi tips, tutorials, and design goodies.

Already subscribed?

Go straight to the Freebie Library and download this layout - plus lots more!

Have you seen our

Divi child themes?

Divi Toolbox plugin?

We offer a great selection of high-quality Divi products to speed up your work. Feel free to use a coupon code IREADBLOG at the checkout to get a 10% discount!

3 Comments

  1. Drew Downz

    Ana, I’m having problems optimizing my site and the scrolling effects falling off. Which JS file is making the magic possible?

    Reply
  2. Hurri

    Thanks Ania,

    This is very helpful to know, as I was struggling with hover and scroll effects!
    The download is so appreciated too.

    Reply
  3. Carolina Bolaños Muñoz

    Very nice effects. Thank you so much.

    Reply

Submit a Comment

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

Enjoing our content?

You might find this interesting...

License Details

REGULAR LICENSE

Single Site

A regular license allows an item to be used in one project for either personal or commercial use by you or on behalf of a client. The item cannot be offered for resell either on its own or as a part of a project. Distribution of source files is not permitted.

EXTENDED LICENSE

Unlimited Sites

An extended license allows an item to be used in unlimited projects for either personal or commercial use. The item cannot be offered for resell either on its own or as a part of a project. Distribution of source files is not permitted.

SUPPORT & UPDATES

Each license is a one-time payment. There are no annual fees. You get lifetime access to product updates. Support is provided for 6 months from the date of purchase.

Server Requirements

SERVER SETTINGS:

  • PHP 7.2 or later
  • upload_max_filesize (256M)
  • max_input_time (300)
  • memory_limit (256M)
  • max_execution_time (300)
  • post_max_size (512M)

PHP.INI SETTINGS:

  • php-xml or/and php-dom
  • XMLReader
  • PHP CURL module

PHP MODULES:

  • allow_url_fopen

Would you like to...

Consult Ania and fellow students?

Join the conversation inside our private FB group.

Would you like to...

Get support privately?

Submit a support ticket via your account page.

Ask Ania?

Submit a question for the next live Q&A session.

Consult fellow students?

Join the conversation inside our private FB group.