The Portfolio category Filter

[codeispoetry]

The above code pen is using the isotope.js

I wanted to gift a Portfolio website to one of my friend who is a cartoonist.

I searched some above pen, which is close to the effect that I am seeking: The category filters

What is the exact search term that I can use on “google” to get more such examples? I tried few, but didn’t get what I was looking for.

Lately,

I also stumbled upon this demo on the web →

Loading Effects for Grid Items | Demo 2

They are using the pure CSS for the animation.

Are there any drawbacks of using pure CSS animations?

[coothead]

@codeispoetry

They are using the pure CSS for the animation.

They are using javascript and CSS.

coothead

[Andres_Vaquero]

@codeispoetry

Are there any drawbacks of using pure CSS animations?

I think having programmatic control of the animation can be very useful and lots of fun as well. Pure CSS is limited in that you could not do more sophisticated things such as stopping an animation at a specific point or calling a script once it ends or for any other purpose that CSS alone will just not fulfill. Some JavaScript implementations just involve the switching of classes which again is limited. But using JavaScript you could write a very powerful CSS animation library that does lots of cool stuff. Also you can make it easier to use than CSS through a nice API and by not having to deal with any of the vendor stuff

[codeispoetry]

@Andres_Vaquero

I think having programmatic control of the animation can be very useful and lots of fun as well. Pure CSS is limited in that you could not do more sophisticated things such as stopping an animation at a specific point or calling a script once it ends or for any other purpose that CSS alone will just not fulfill. Some JavaScript implementations just involve the switching of classes which again is limited. But using JavaScript you could write a very powerful CSS animation library that does lots of cool stuff. Also you can make it easier to use than CSS through a nice API and by not having to deal with any of the vendor stuff

Yes, I know, but I have negligible or perhaps 0 knowledge in javascript.
Recently started learning though.

[Andres_Vaquero]

There sure are some good CSS animation libraries out there that I’m unaware of… I do have a script I wrote just for the fun of it and learning too

[codeispoetry]

what is your opinion about the codepen I have posted. Is that a premium code can we take it and take things further from there?

The code here is an open source code. i emailed those folks and they confirmed that i can use that w/o giving credits t them.

I think if we can make a fusion of this →

this one

then we have a great options.

The animation effect should come in the drop down option that which animation is needed. rest the design looks good in that codepen.

but in that case would not that be too clumsy? code pen is suing isotope.js and the another one is using these many.

[Andres_Vaquero]

Hi there I think maybe for what you’re trying to accomplish you can get away with a simple CSS animation and perhaps a little javascript which just takes care of setting a CSS class to a dom node when appropriate, for example when you click a button. I actually think that would be a good exercise to get you learning a little more JavaScript because it would not be too complicated. No need for third party stuff really…

[codeispoetry]

@Andres_Vaquero

I actually think that would be a good exercise to get you learning a little more JavaScript because it would not be too complicated. No need for third party stuff really…

this looks like an assignment.

[Andres_Vaquero]

Let us know if you get stuck. There should be plenty of documentation online to get you started…