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.
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.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