Howdy fellow campers !
I am looking for your insight for I am trying to accomplish a particular transition, but after many tries I did not get any satisfying results.
The transition I’m looking for is similar to this person’s portfolio . If you look at his work’ div icons, uppon changing the tab (for exemple from ‘All’ to ‘Design’) you see that some of the divs fade out while the remaining ones auto-reposition smoothly. I think it would be possible to do something similar by calculating the position of every div then assigning them an absolute position corresponding to the place they’re supposed to go to, but I thought I might be overcomplicating the thing.
Does anyone have an idea (or a good tutorial) for me to accomplish such a transition ?
Thanks a lot to everyone !
No absolute positioning or anything, but you will need some JS to change the class on the container for the divs.
So say you have a class of say wordpress on the WordPress divs and so on. On the parent, you add a class like wordpress-active when that button is clicked or whatever.
Basically, on all, the divs all have opacity:1 and a height. When you click the button and change the class of the parent, you have a rule something like .wordpress-active .div:not(.wordpress). And in that rule you have an animation that first fades the opacity to 0 and then the height to 0 on those divs.
Edit: If it’s 2d, ie a grid (I can only see mobile), can animate width as well, though it’s easier with CSS grid
Yes, It was my first idea, but when I tried it, the div don’t really ‘reposition themselves’, they just clip to the place they would be without their siblings, even if smoothly thanks to transition. What interested me in the link I gave, is how the div reposition themselves on a new set of rows. For exemple, if you go from ‘all’ to design the in portfolio I linked and observe the movement from the div titled ‘mesa grande’, it actually goes to the first row without cliping from one row to another.
Gosh, I’m terrible at explaining things in english. hopefully you’ll get what I meant, sorry about that 
No, I understand, you English is great! I was looking at this on a phone, and on the phone it sits in a single column - what I suggested would work with a bit of fiddling around, but isn’t actually much use for a 2d layout now I’m looking at it in front of a computer.
What he’s used is a library called Isotope, which is a filtering version of a library by the same developer called Masonry, which gets used/copied a lot (Pinterest is the most obvious example). So initial answer is use Isotope.
Because it’s using a grid of a fixed size, I think at least most of this might be possible using CSS grid and the auto-flow: dense property (automatically fills empty holes in the grid), which looks to be supported fairly well now. The issue is that the bit you really want, the slide, I don’t think is possible. And that’s the thing that kills any simple solution I can think of.
You need to know the position of the items in the grid (which can be down pretty easily in JS, you just need the top left corner of each one), and you need to know the order and what type each one is. Then when you remove any through filtering, you find the next “alive” one, and apply transform: translate(x,y) (in JS) to move it over where it should be.
You could do something like this with CSS Grid, and the dense property (note this may not work, but it’s the closest I can get sketching out an idea in my head):
- Filter clicked
- Clone the elements that are not hidden using JS, those clones need to sit exactly above the elements they are clones of.
- All the underlying elements that have been cloned, set opacity 0
- Fade out the elements that need to be hidden, then display:none so they’re no longer in the grid, and it reflows.
- translate the clones to the new positions, animating the transition. They should be directly above their original counterpart.
- Opacity 1 on the grid items and delete the clones
1 Like
Well I ended up using isotope and it works great. Thanks a lot !
1 Like