Mind-Blowing Anime.js Staggered Grid Effect

[@nagarjunprasad]

Never learned so many things in CSS even through a dedicated tutorial video. This is awesome content, keep up the good work!!

[@user5214]

The sheer simplicity is what's blowing me away. And the pacing was great. And it was entertaining. And the music is great. And his voice is relaxing. And the final product was more than I expected coming into this video.

[@programaths]

@@user5214 He may know about marketing. There was a wave of marketing strategy where, as a seller, you tried to blown your customer mind, tricking them to come back to you for more. So, you end up selling sturdier equipment for quite a price, knowing that the customer will come back before its end of life to be "up to date". It's not effective for mass sales, more for sales where you intend to build a relationship. It's why it much less done those day. Still, when you hear "I know X, let's call him, he can figure it out", then you're in that case ^^

[@Pavel-wj7gy]

This breakdown is insane! I spent, like, a month making my version of an Etch-a-Sketch project and implementing a flood-fill. This is extraordinary.

[@robbyrish13]

Don't know if you're doing the Odin Project but I also did that project before doing this and now I want to go back and implement some of this in that

[@iced2916]

@@robbyrish13 The Odin Project gang! God I remember doing that project too, now I can't even remember when was the last time I used vanilla js

[@siliconhawk]

@@iced2916 excuse me but what might this Odin be ??

[@iced2916]

@@siliconhawk it's a website that teaches modern full stack web development for free, it's pretty good

[@Blue_Nova707]

​@@siliconhawkit's website for learning webdev

[@nevinkuser9892]

You've successfully gone into the realm of the unknown. Really cool effect at the end with the grid gutter showing the color behind it. I really like it. And then the transition to show what's behind is just so cool.

[@omersabic8555]

Wow! You make this look so easy! Great job, really well done. Recently got my first job in front-end development. Now you gave me a slight linger of impostor syndrome lol

[@Hyperplexed]

Haha congrats! Don't worry, there is not a day that goes by that I don't have a bit of impostor syndrome. These videos typically take 2 - 4 full work days to make, so making it look easy is by no means easy (for me at least).

[@KushagraPratap]

@@Hyperplexed that is the best response to a comment by a creator.

[@ridwanajibari4443]

@@Hyperplexed ok i can sleep now

[@AdrianMark]

@@Hyperplexed hahaha I just called you a front end god in my comment, then I read this comment and see your humility. Thank you man, you're even better than I first imagined. Really wishing for your success and your channels success. Thank you again for sharing your thoughts and knowledge.

[@madaotee]

@@Hyperplexed sigh* now I can breath

[@dom8429]

such an underrated channel. thank you so much for this 😊😊

[@dragonreborn2141]

This channel is blowing my mind. I hope you continue making the awesome showcases. Cheers

[@infinitelyexplosive4131]

I quite like your video style. You're good at choosing which details to keep in and which ones to gloss over.

[@jhonb03]

Caballero esto es oro puro, me encanta la forma que explicas incluso no se mucho inglés y siento que entendí cada parte que explicaste, Woow eres un genio.

[@sharkyboi6018]

for english users: Gentleman this is pure gold, I love the way you explain even I don't know much English and I feel like I understood every part you explained, Woow you are a genius. Edit (I used google translate cuz i was curious)

[@legitimacy]

You're actually so underrated, got better graphics than most KZbinrs and way more concise. Have you considered doing TikTok? Your short form videos will probably do good there!

[@Hyperplexed]

Thanks!! So far I've made two KZbin shorts that I also posted to TikTok, but I definitely need to make more!

[@electrolyteorb]

@@Hyperplexed you don't need to Tik tok, your YT videos are just great😍

[@vaisakh_km]

@@Hyperplexed please don't do tictoks, it will degrade your content's quality

[@truestbluu]

@@vaisakh_km eeehhhhh..

[@RossWasTaken]

​@@vaisakh_km Nah not necessarily, there are loads of great content creators that make high quality short-form content on the side

[@MrFiregem]

Actually epic. Glad I found you on reddit

[@apuji7555]

Same!

[@h.nazmulhassanrakib5058]

@@apuji7555 me also glad. but I found him in youtube.

[@legendarygamers1703]

KZbin Recomended me.

[@calebdeming5515]

I think they work well in tandem with each other. Could even be used as an interface for a modular app where the pieces snap to the grid.

[@QUIGNONPAIN]

Cant wait to use this effect and its variants ! Thank you very much, the way you explain step by step is really clear ! I appreciated it !

[@kewlf00l85]

Gradient border. Easy choice. Looks so clean.

[@krazymeanie]

I'm a lover of tailwind css but this is making me love CSS so much lmao. Think imma switch back for a while in my next couple projects

[@AdrianMark]

You are a front end god. I am so glad to have found this channel man, you have no idea. Thank you so much for sharing your thoughts and knowledge. Hoping I'll be half as skilled as you one day, someday soon.

[@thespicehoarder]

Your trolling on TikTok is god-tier and your content on youtube is perfectly explained. 10/10 dude, keep it up!

[@patchstep]

“Lets pretend we’re React for a moment, and create some HTML in our JS” Amazing

[@sourmans]

I'm speechless. This is a keeper. Bravo. Standing ovation

[@Fifa-ip3ux]

You are actually amazing. I have never been so inspired 🔥

[@jayjolupoi88891]

that's just impressive, you just earn yourself a new subscriber. it reminds me how little i know about the fundamental of css and styling, this video really inspire me to learn more, and waiting for more video

[@marcelstaiger9100]

First vid I've seen from your channel. Great. I need to directly watch the next one :)

[@Burnedout95]

You're actually insane man this is so good

[@ibrahimame4224]

How have I never found this channel until today. The content is amazing 💯

[@okunamayanad]

i think the outlined would be really good for a header, and also the rainbow one for background

[@yayer_27]

That is crazy good! I absolutely love the one with the tile borders, congratulations.

[@paradoxify_]

What you can do extra is, generating the different colors for the body gradient when making toggled variable true; It'll generate different gradient every time we go back from tiles to gradient;

[@tusharkuntawar6170]

Sigma chad for making the outline version look that nice

[@azavier-a]

very well may be the most informational video i've come across yet

[@piratesmanX]

Instantly subscribed. THANKS KZbin ALGORITHM!!!

[@forshetrial]

You deserves even more likes and views!! 🎉❤

[@4.0.4]

"why are sites slow??" The code:

[@thelearner6230]

I don't understand how you don't have more than 20 million subscribers. And just what kind of people are disliking your videos.

[@compass9909]

You are a literal genius

[@shakerwahba3742]

This worked incredibly well! I can finally play it thanks

[@rodelioliwag7627]

You are a digital magician man! Such talent!

[@vmGrymm]

your videos are really inspiring for a beginner. thank you so much!

[@ajitshaw1936]

I just found a gem, your contents make my 🧠 to release a lots of dopamin 🤟

[@austincodes]

The border gradient version is absolutely beautiful

[@portellasp]

That's art. Congratulations !

[@thethiny]

in 5 minutes he created this, meanwhile in 5 hours I can finally use the code I copied from Stack Overflow

[@RobertWildling]

Really, really awesome! I am a sucker for the gradient version!

[@chicharongbaboy]

Thanks! I've been searching how to get it and this is brilliant :D

[@treshi]

Both are great and it depends on what you want to do, but to be fair your gradient version rocks! Just insane what you can do with a few lines of code some libs, HTML5, CSS3 and JS!

[@OutMagic]

That's insane dude XD wow! Both are gorgeous :D

[@Gumshoe21]

Wonderful demonstration, very clear and extremely educational. Effect looks great and can be expanded upon for sure, I just gotta figure out a way to apply what I've learned now, haha.

[@lazyman2451]

quick and simple explaination love it 10/10.

[@MAXpower10000000]

Damn 💯💯 your improved version rocks

[@apuji7555]

You're a really great channel! You should do a tutorial series or something. A _ton_ of people would appreciate that.

[@Hyperplexed]

Thank you! I will definitely consider doing that at some point!

[@Hyperplexed]

Can I ask what kind of tutorial series you'd be hoping to see?

[@thesynical939]

@@Hyperplexed honestly a concise beginners to intermediate would be great.

[@mustafahasircioglu5796]

OH MY GOST THATS PRETTY

[@Lik4nGaming]

It looks awesome, you make it look so easy. great job.

[@wrench2474]

so many things going over my mind 🤯

[@tanakakun6093]

Actually been trying to find a grid system for my personal notes application and I think I found it through your vids. Thx for the tutorial!

[@dweblinveltz5035]

This is a convoluted implementation if all you want is a responsive structured grid of items. He has a decent reason for this implementation, but you likely don't and will only overcomplicate your code.

[@stanimirnikolov159]

Epic graphics. Blowing my mind rn

[@OrangeC7]

Missed opportunity to make the chess site staggered grid demo have a chessboard coloring on it

[@marius1029]

I love your videos, I just found out about you and I'm first year in Informatics... You're definitely giving me so many ideas for my html exams

[@Billiam112]

Wow, instant subscribe to this content. Awesome stuff!

[@Oliver__404]

that's actually so sick. nice

[@stefanutdraganoiu1261]

Still working as of today! Thank you!

[@Juliano08]

You are making my life soo much easier

[@Rowan11088]

Couldn't you simplify this approach by using "grid-template-columns: repeat(auto-fit, minmax(....))" ? You'd still need JS to calculate the number of child divs to insert, but the rest can be taken care of in the CSS I think. I haven't tried it yet though, so maybe I'm overlooking an issue?

[@Hyperplexed]

Yep! The pen this is based on (link in desc) actually does it this way. In an effort to reduce some of the time/complexity of this vid, I went with the custom css vars, but you can absolutely do it the way you're referring to. For anyone curious, you can replace the grid row and column lines in the css with: grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); grid-template-rows: repeat(auto-fit, minmax(100px, 1fr)); and remove the lines setting the "--columns" and "--rows" variables from the js and the same effect will be achieved.

[@Rowan11088]

@@Hyperplexed Thank you for the reply! I was less than confident, glad to know I wasn't off base. And I totally see why you would avoid that approach to keep things streamlined.

[@MrMazvaz]

Exactly, I was waiting for him to refactor it into this, but he never did D:. Still a really cool video though

[@firstname4474]

That's just amazing, somehow got this video in the recommended and instantly subbed. I'm not even a frontend tho.

[@SilverTheFlame]

This is so cool. Thanks for the awesome video :)

[@seveto3911]

I LOVE your video style

[@TheRelytYT]

holy shit that end result blew me away

[@NOSHEDMANTIS]

This did done blow my goddamn mind, fren.

[@AnAnonymousHuman]

After watching this, I think coding might be something I want to learn in the future! So cool

[@charliesaint]

Why not something you learn now?

[@ixinor]

I would suggest starting with Arduino's, PHP or Processing.

[@vt9988]

You make really WOW videos! I like the border version more

[@nyeponpon]

i entered the video thinking it had something to do with japanese animation anyway, learnt something new as an amateur web developer :D

[@LFMmmelesi]

effortless, timeless, rainbow border takes the win

[@Really_Zahren]

I swear, like 50% of programming is just knowing what plugins others have written for the language you're using

[@Cookie-mv2hg]

Came here for CSS, stayed for the ASMR vocal of yours.

[@karim-gb5nx]

amazing. Didn't feel to skip any seconds in the video

[@h.nazmulhassanrakib5058]

Finally KZbin did a good job for Suggest me his video. 🥰🥰🥰🥰

[@zlvr]

mindblowing 🌸🌸(if u know u know, rip ronnie)

[@robincannon2569]

😙👌 magnificently concise gold dust quality video, damn i want to try so many bits of this out already

[@spacecr4zygamer]

I love the rainbow gradient effect one but the hexagon lover I am I bet this would be 10 times cooler as hexagons, sadly I wouldnt know how to do it myself

[@nntanisiminevolts1155]

Mad skills 🤯

[@aghileslounis]

what an easy new like and subscribe ! waw it's crazy how much we can do with css and js

[@LisandroDC]

BEAUTIFUL

[@gsoul94.channel]

Amazing, thanks for insight

[@captansambhav7496]

Really nice and helpful... Thanks!

[@germansiciliano9241]

Meanwhile I'm struggling to center the inputs of my form using the grid. The beautiful things you can do when you know your stuff, great content for sure!

[@ibrahimkhalil7544]

It worked! Tank you sir.

[@aboelsoof301]

Awesome effect Good Work

[@Maseschine]

I can't code. I steal code from others. I hate myself to not invest more time to actually learn this stuff. I love you! This is awesome!

[@ebrelus7687]

That's literally what coding & learning is 😉😂

[@Maseschine]

@@ebrelus7687 feeling less bad now and preparing my application as front end dev now. 😅

[@biggusdickkus2247]

This is so awesome 👍🏻

[@robbyrish13]

This is by far my favorite web dev channel. Thanks so much for these videos. I must've missed something because when I was done writing all the code that you wrote in the video I got an error message for line 41 in js file saying that the value for the "quantity" parameter was declared but never read. There was something else that was fishy about the parameter in the .map method call in that function but I can't remember because I got done with the video and the code didn't work I went and copy/pasted the code from the codepen and everything in that kind of works except the ripple effect it might have to do with the fact that I can't access the font awesome icons linked in the description because the link is truncated.

[@padinnya_jepy]

no way you just tricked me to watch a js video cuz I thought it was about some anime related website anyways, great vid, don't like js but it looks cool af

[@rose_watr]

Beautiful and awesome ❤️👍

[@MaDragon7]

Is this hitman voice? 😳 Cool work

[@hershes]

Amazing but I can't help but wonder if this would be more performant if it was just done on a canvas...

[@maxxxb4uh4us80]

Isso sim é perfeito parabéns pela iniciativa

[@martinj3239]

That's some truly dirty JS at 1:12.

[@prionkor]

You have earned a subscription ;)

[@seannewell397]

That's some dope ass shit if I've ever seen it.

[@yoNikma]

your creative! keep going and thanks for sharing

[@wayneswildworld]

The border one is awsome

[@devjony]

This was awesome

[@pranayghuge7557]

Damn you make it look so easy

[@ufukbakan4741]

Instead of passing --columns number from javascript to css, you can just do grid-template-columns: repeat(auto-fill, 50px);