I am currently working on a list of div items that are being filtered and sorted using JavaScript. Each item animates as it enters the screen, scaling up to its final size.
However, when I apply filters using buttons, items that are already displayed do not replay this entrance animation.
My goal is to reset the filter every time a new button is selected so that every item always animates into place, regardless of what is being filtered or whether it is already on the screen.
Check out my CodePen for a live demonstration
<div class="filter-list">
<button class="active btn" id="all">All</button>
<button class="btn" id="oranges">Oranges</button>
<button class="btn" id="apples">Apples</button>
<button class="btn" id="bananas">Bananas</button>
</div>
<div class="grid">
<div class="artist-img item oranges">oranges</div>
<div class="artist-img item apples">apples</div>
<div class="artist-img item bananas">oranges</div>
</div>
Here's the JavaScript code:
var $items = $(".item");
var $btns = $(".btn").click(function () {
if (this.id == "all") {
$items.show();
} else {
var $el = $("." + this.id).show();
$items.not($el).hide();
}
$btns.removeClass("active");
$(this).addClass("active");
});
And the CSS styles used for the entrance animation:
@keyframes entrance {
0% {
transform: scale(0.5);
}
100% {
transform: scale(1);
}
}
.grid > div {
padding: 1rem;
position: relative;
animation-duration: 0.5s;
animation-name: entrance;
}