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

How To Change The Divi Filterable Portfolio Animation

Nelson Miller Pee Aye Creative
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.

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.

Last updated Oct 3, 2023 @ 7:24 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.
Pee Aye Creative Black Friday Sale

Our Once A Year Sale Is Happening Now!!!

25% OFF all Divi Plugins, Courses, and Child Themes!

Shop The Sale Now!

Asset 7

Shop Our Divi Products

Plugins • Courses • Templates

Visit The Shop

Pee Aye Creative Black Friday Sale

Our Once A Year Sale Is Happening Now!!!

25% OFF all Divi Plugins, Courses, and Child Themes!

Shop The Sale Now!

Divi Tutorials On YouTube

Our videos have views! Join subscribers and enjoy over video tutorials!

Visit Our Channel

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

Recent Posts

0

Your Cart