Building a Filtering Component with CSS Animations & jQuery

Some months ago, I wrote an article about MixItUp, a popular jQuery plugin for filtering and sorting. In today’s article, I’ll show you how to build your own simple filterable component with jQuery and CSS animations.

Without further ado, let’s get started!

Setting Up the HTML

As a first step, I’ll show you the HTML structure of the component. Consider the following markup:

[code language="html"]
<div class="cta filter">
<a class="all active" data-filter="all" href="#">Show All</a>
<a class="green" data-filter="green" href="#">Show Green Boxes</a>
<a class="blue" data-filter="blue" href="#">Show Blue Boxes</a>
<a class="red" data-filter="red" href="#">Show Red Boxes</a>
</div>

<div class="boxes">
<a class="red" data-category="red" href="#">Box1</a>
<a class="green" data-category="green" href="#">Box2</a>
<a class="blue" data-category="blue" href="#">Box3</a>

<!-- other anchor/boxes here ... -->

</div>
[/code]

Notice that I’ve set up some pretty basic markup. Here’s an explanation of it:

• First, I’ve defined the filter buttons and the elements that I want to filter (we’ll call them target elements).
• Next, I’ve grouped the target elements into three categories (blue, green, and red) and I gave them the data-category attribute. The value of this attribute determines the category that each element belongs to.
• I’ve also assigned the data-filter attribute to the filter buttons. The value of this attribute specifies the desired filter category. For instance, the button with the data-filter="red" attribute/value will only show the elements that belong to the red category. On the other hand, the button with data-filter="all" will show all the elements.

Now that you’ve had an overview of the required HTML, we can move on to explore the CSS.

Setting Up the CSS

Each time a filter category is active, its corresponding filter button receives the active class. By default, the button with the data-filter="all" attribute gets this class.

Here are the associated styles:

[code language="css"]
.filter a {
position: relative;
}

.filter a.active:before {
content: '';
position: absolute;
left: 0;
top: 0;
display: inline-block;
width: 0;
height: 0;
border-style: solid;
border-width: 15px 15px 0 0;
border-color: #333 transparent transparent transparent;
}
[/code]

In addition, I’m going to use flexbox to create the layout for the target elements.

See the related styles below:

[code language="css"]
.boxes {
display: flex;
flex-wrap: wrap;
}

.boxes a {
width: 23%;
border: 2px solid #333;
margin: 0 1% 20px 1%;
line-height: 60px;
}
[/code]

Lastly, I’m defining two different CSS keyframe animations that I’ll use later on to reveal the elements:

[code language="css"]
@keyframes zoom-in {
0% {
transform: scale(.1);
}
100% {
transform: none;
}
}

@keyframes rotate-right {
0% {
transform: translate(-100%) rotate(-100deg);
}
100% {
transform: none;
}
}

.is-animated {
animation: .6s zoom-in;
// animation: .6s rotate-right;
}
[/code]

With the markup and CSS in place, we can start building the JavaScript/jQuery.

Continue reading %Building a Filtering Component with CSS Animations & jQuery%

by George Martsoukos via SitePoint