Smooth removal effect

I created a photo filter, but I couldn’t get a soft removal effect.

I have done the desired effect in method 1 (line 13), but the problem is that there are voids in the places of the hidden elements, and if i write : display: none; the effect will be gone.

Here is the link to see what i did:

Here is the link to see what I’m trying to get at here :

https://ivkovic.me/themes/pluton/#portfolio

Hello @albaraa_1949

you can use display : none; to remove the box you want so for example i added this to your css

div.remove{
  display: none;
}

and updated your product loop to this

products.forEach((el) => {
      if (!el.classList.contains(spn.textContent.toLowerCase())) {
        el.classList.add("hidden");
         setTimeout(() => {el.classList.add("remove")},500);
        
      } else {
        el.classList.remove("hidden");
         el.classList.remove("remove");
      }
    });

i used the settimeout to allow the animation to finish it job

hope that help and have a nice day :slight_smile:

2 Likes

by the way when you see some site and not sure how it been implemented you can inspect it so click on any item then inspect then and notice the html and css for the element you like also you can check the js code just go to the debugger panel from your browser

and have a nice day :slight_smile:

1 Like