АртемБМ,
<!doctype html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.projects-list .projects-item{
transition: .5s;
transform: scaleY(0) translateX(-100%);
opacity: 0;
height: 0;
}
.projects-list .projects-item.visibility{
transition: .8s;
transform: scaleY(1) translateX(0);
opacity: 1;
height: auto;
}
</style>
<script>
document.addEventListener('DOMContentLoaded', function() {
document.querySelector('.projects-categories').addEventListener('click', ({target})=>{
const cls = target.dataset.id;
document.querySelectorAll('.projects-list .projects-item').forEach(item => {
const add = cls == 'all' || item.classList.contains(cls);
item.classList.toggle('visibility', add)
})
})
});
</script>
</head>
<body>
<div class="projects-categories">
<button class="btn-projects-categories" data-id="all">All</button>
<button class="btn-projects-categories" data-id="web-design">Web Design</button>
<button class="btn-projects-categories" data-id="mobile-app">Mobile App</button>
<button class="btn-projects-categories" data-id="illustration">Illustration</button>
<button class="btn-projects-categories" data-id="photography">Photography</button>
</div>
<div class="projects-list">
<div class="projects-item mobile-app ">mobile-app
</div>
<div class="projects-item photography ">photography
</div>
<div class="projects-item web-design ">web-design
</div>
<div class="projects-item illustration ">illustration
</div>
</div>
</body>
</html>