Subscribe On YouTube

Join other subscribers and enjoy other Divi video tutorials!

How To Change The Divi Filterable Portfolio Animation

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

▶️ Please watch the video above to get all the exciting details! 👆

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.

Where To Paste The CSS Code

If you are using Divi Assistant, simply paste the code below into the CSS tab of the code editor window (be sure to enable it in the Code Helper settings).

If you are using a child theme such as our free Divi child theme, place this snippet into the style.css file.

Otherwise, you can place this code in your Divi>Theme Options>Custom CSS code box.

If you need help understanding where to paste the code, please check out our complete guide about 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.

Categories: Tutorials

Subscribe For More Things Like This!

At the start of each month, we send out a recap newsletter from the month before with family news, Divi news, our latest tutorials, and product news. Occasionally, if the news is too exciting to wait, we will send out another email separate from the monthly newsletter. That’s what you get when you subscribe, and of course you can unsubscribe if you are no longer interested!

Blog Post Optin

Leave A Response!

By commenting you agree to our Blog & YouTube Comments Policy

2 Comments

Comments By Others

  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. Required fields are marked *

Recent Posts

0

Your Cart