All Collections
Divi Documentation
FAQ's
How to change the Filterable Portfolio's default animation
How to change the Filterable Portfolio's default animation

Chnage the default animation that the Filterable Portfolio uses by default

Eduard Ungureanu avatar
Written by Eduard Ungureanu
Updated this week

Out of the box, the Filterable Portfolio uses the fadeIn animation to display the project after the page loads and the projects assigned to a specific category when the Filterable Portfolio filters are used.

The default animation can be changed using custom CSS code.

  1. Edit the Filterable Portfolio's settings and go to Advanced Tab > CSS ID & Classes > CSS Class and type divi-fp-custom-animation. This custom CSS class would be used later in our CSS code.

    Filterable Portfolio custom CSS class name

  2. With the CSS class set up, in Advanced Tab > CSS ID & Classes > CSS Class, add this CSS code:

    /*Custom Filterable Portoflio Animation*/
    .divi-fp-custom-animation .et_pb_portfolio_item.active {
    animation: fadeInTop 1s 1 cubic-bezier(.77,0,.175,1)!important;
    }

This will animate the projects using a Fade from top animation.

Note: Other animations that can be used:

  • fadeRight

  • fadeBottom

  • multi-view-image-fade

  • fadeInTop

Did this answer your question?