How To Change The Divi Filterable Portfolio Animation Tutorial by Pee Aye Creative

How To Change The Divi Filterable Portfolio Animation

In this tutorial I will show you how to change the Divi Filterable Portfolio animation when switching between filters.

Join subscribers on our YouTube channel and enjoy other Divi video tutorials!

1. Add A Custom CSS Class To The Divi Filterable Portfolio Module

The first step to adjust the filter animation in the Filterable Portfolio module is to add a custom CSS class to the specific Filterable Portfolio module that you want to affect. This class will be the link between the module and the CSS code, which will be added in the next step.

Open the Divi Filterable Portfolio module settings and go to the Advanced tab to the CSS IDs & Classes toggle. Place the class “pa-portfolio-animation” in the CSS Class input field.

add css class to the Divi Filterable Portfolio module to change the animation

2. Add The CSS Snippet

We are going to use the default CSS animation in the Divi Filterable Portfolio module as the base, and then modify it in step #3. I have added the default CSS snippet below and also added the CSS class selector from step #1. So go ahead and copy and paste the snippet, and we will customize it in step #3.

If you are using our free Divi child theme, place this snippet into the style.css file. Otherwise, place this in your Divi>Theme Options>Custom CSS code box. If you need help, check out our complete guide on Where To Add Custom Code In Divi.

/*Divi Filterable Portoflio Animation*/
.pa-portfolio-animation .et_pb_portfolio_item.active {
    animation: fadeLeft 1s 1 cubic-bezier(.77,0,.175,1)!important;
}

3. Adjust The Animation

The default CSS snippet in Divi is using shorthand to create the animation, but you could also separate each property if you want. If you are new to the topic, you can learn more about using CSS animations.

To keep it simple, I suggest changing the “fadeLeft” animation name in the snippet to something else. The great news is that Divi already comes with several pre-made keyframe animation names built-in, so we just need to replace it in the code snippet. 

  • fadeRight
  • fadeBottom
  • multi-view-image-fade
  • fadeInRight
  • fadeInTop
  • fadeOutRight
  • fadeOutBottom
  • fadeOutTop

You can also adjust the animation timing function. So you could replace the “cubic-bezier(.77,0,.175,1)” with something else like “ease” or “linear.”

NOTE: A topic like this gets a little more complicated, so be sure to watch the video to see examples of this in action.

Last updated Oct 17, 2022 @ 11:49 pm

Subscribe

Each month we send out a roundup email newsletter with the latest tutorials, product updates, helpful resources, and any other industry or personal news. Occasionally we send an extra separate email here and there if we just can’t wait! So that’s what you will get if you subscribe, and you can always unsubscribe at any time if you just can’t take it anymore :)

Blog Post Optin

Please share this post!

Nelson Lee Miller (aka The Divi Teacher)

Nelson is the owner of Pee-Aye Creative in the beautiful state of Pennsylvania. He loves helping small businesses, exploring outdoors, building websites with Divi, and teaching others.

Leave A Response!

By commenting you agree to our Blog & YouTube Comments Policy

2 Comments

  1. Alecz Eighmard Silva Deyto

    This is a great guide Nelson, btw do you have a list of what other keyframes Divi has? Thank you

    Reply
    • Alecz Eighmard Silva Deyto

      Oooooh my bad, found it! thanks bro!

      Reply

Submit a Comment

Your email address will not be published.

Recent Posts

0

Your Cart