Awesome 3D ANIMATION Javascript Tutorial!

[@sabatsomaia343]

8:57 me and my classmates when the teacher leaves the classroom

[@abe10]

xD

[@adityashukla7849]

😂 Me and my friend actually did that once which makes your comment more funny

[@Jonasprodrigues]

Wooooooonnnn love this! Do you have more material this way in your teacher course? Thank you very much

[@rrahll]

Lol exactly

[@akifcankara2225]

LOL :D

[@darkquaesar2460]

It's extremely difficult to find tutorials for animations and effects that DON'T use a library. Please do more like this!

[@morning5tarr]

I had to use react-tilt

[@darkquaesar2460]

@Shoapeng Lee yeah but why would you use a library that includes 300 other things when you want only one thing in that library?

[@luppolomalvagio1831]

@@darkquaesar2460 that's why tree shaking exists

[@darkquaesar2460]

@@luppolomalvagio1831 fair enough

[@luppolomalvagio1831]

@@darkquaesar2460 i've made it mom, i've won an internet argument, look at me

[@KiGreen]

Perhaps, in 8:56 the best explanation for the error in animation

[@darshanrevgade7819]

Laughed a lot while he was doing it

[@EWorldHub]

😂😍😜

[@Imaginarytails]

😂😂

[@iteratedofficial]

I agree.

[@tachibaoit]

Preview of the Header designed for Lalla's kzbin.info/www/bejne/pn22g5Swiah3e7M

[@vivek9746]

1:19 My teacher before snatching the answer sheet.

[@srinivasjoshi4693]

Lol ..very true

[@DiganRoom]

Haha, how did you make your profile pic by the way?

[@vivek9746]

@@DiganRoom I am a graphic designer. I used Adobe illustrator to create this picture.

[@laxuscullen]

@@vivek9746 ngl it's pretty shit (pfp)

[@DiganRoom]

@@vivek9746 Cool! You're really good, did you draw your picture?

[@vfxjmb]

i only know html and css but the javascript just makes sense Thanks Dev ed

[@j3froc63]

8:02 Explaining why he puts a 'card' div inside a 'container' div. Bookmarked 17:43 Javascript section

[@adityashukla7849]

Wow bro! You're so good you should have a youtube channel dedicated to this.

[@tachibaoit]

Preview of the Header designed for Lalla's kzbin.info/www/bejne/pn22g5Swiah3e7M

[@kidskpadonou894]

lol

[@emacsultron6212]

In addition to being a great teacher, there's something very funny about this guy's presentation - there's a slight hint of self-deprecating humour and sarcasm (in a good way) which makes it unique, refreshing, and a joy to watch. Please don't change your style!

[@floskater99]

To make it go in smooth you can use a setTimeout-Function in mouseenter to remove the Transition from CSS after 0.75 sec.

[@yupii1997]

It always amazes me how something can seem extremely hard to make, but when you see how it is done, and break it down and take your time to learn how each line of the code works you realize it is not extremely hard anymore and you pick up a new trick to implement in your work, love your work Ed always something new to learn maybe i will use this when i make my mothers website, stay awesome Cheers

[@keonook]

So concise, to the point, and I had so much fun learning. 35 minutes went by so fast! Loved the tutorial Ed :)

[@nervanis]

This is awesome! Thanks so much. One thing I’d love to see is a 3D model of the shoe so it looks less flat. Any plans on releasing content covering 3D objects on the web?

[@ssh17hx0r]

Dude, your videos and instruction is amazing. Keep it up! You're ability to break things down in an entertaining way really helps things stick. I'm super impressed. You blow any college professor I ever had out of the water.

[@atharvkulkarni2256]

This is first half hour video which I clicked out of curiosity and watched fully in one go

[@juandavidsotocarmona7063]

8:55 definitely the best part of the vid hahaha. Thank you for this kinda videos man!

[@hamzahmd_]

Oh boy! Your tutorials are really amazing and I'm easily been able to remember the syntaxes used in your videos. You always come up with unique and creative stuff.

[@morale3056]

Absolutely loved it. May be someday you'd do a video on doing such an animation on a react component, may be the same card so that we can understand how we're dealing with the same thing but for react ♥️

[@a1x45h]

i loved this video man your voice is so soothing and the design is amazing!

[@FRONTRUS]

*Covid-19* : Making Programmers Since 2020 🎓

[@eliseoac966]

Great tutorial. Ty so much

[@jeffalves3566]

Man! Thank you! I'm new on your channel and it's been great! And I've been binging watching your channel!! Keep it up with the awesome videos! I love the ones about css and js animations Cheers!

[@ishimweemmanuel1607]

No tutor to learn things from as long as you are here I do like it.Everything is straight forward.Thanks

[@devine_noise]

Been a while since I've watched your tutorials. Your commentary is hilarious.

[@frankdrolet9439]

One of the best teacher out there for sure, these videos about Js animation are my favorite!

[@FynnJakobsen]

27:25 to prevent the snapping effect add a setInterval({card.style.transition= 'none'}, 300);

[@tiffanyphalen3807]

Your videos help me understand concepts that were only brushed over in the bootcamp I attended. I really needed a resource like this, thank you.

[@insaneviruss]

The jittery effect in the end was because you forgot to add transition on .purchase button. You added on purchase instead. Nice tutorial btw!

[@karthickshankar1527]

33:10 good catch

[@QubitPi]

I learned a lot. It hammers CSS so beautifully in my mind

[@brhh]

7:07 this is how you know that you are learning from the right person no cap

[@ravikumargovindaraj7426]

I just.. subscribed .. as soon as you explained why the container exists and the way you wobbled.. bro..

[@bittrix]

its 01/20/2022 and it doesnt work properly. :/ the ${ } to refer the variable inside the css functions doesnt work, so i bashed my head trouble-shooting it until i found that i had to close quotes and use use plus sign, since the output is a string. something like: card.style.transform = 'rotateY(' + xAxis + 'deg) rotateX(' + yAxis +'deg)'; and the 'perspective: 1000px' value inside body{ } doesnt work either. i had to add a 'perspective(1000px)' as an attribute of the transform function in each element i wanted to pop out the screen. albeit all this changes i came with, in the end it is quite far from the visual result ed got in the video. mine is pretty bleh. hope its any config or plugin i dont have installed, cause i really wanted to reach some cool 3d effects like these :/ thanks note: im a noob, started out like 2 months ago.

[@agk2011]

first of all thanks for this video, it was really useful. Second of all, this is by far the funniest video I've watched for you on KZbin. Keep up the good work, man.

[@hyyanbriseno5373]

A woman found dead on the side of a Houston road has been identified as a social media influencer: www.11alive.com/article/news/...

[@richardjones9598]

Subbed: this was so cool! thanks for the share, great source to learn from, thanks again!!

[@wallywalbank6037]

Stumbled across this by accident but loved your style. I always found javascript too much for my tiny mind but I'm actually going to give this a go. Great tutorial - you have a new subscriber

[@amchourasia]

8:56 is like the best thing I have seen on the internet. It made me laugh alound man 🤣🤣. I saw it multiple time and each time it was more funny than before 😂

[@HamzaKhan-ue7cq]

8:57 this is exactly how my senior developers use to explain things when they are upto something lmao Dude u just got a subscription just because of that 🤣

[@ufufu001]

29:38 my frustrated ass when i try to do literally anything

Perfect! This tutorial shows practicaly 80% of what i want to know...i thought i have to looking for 50 another videos to get to the point... so... thank you man

[@AsavarKul]

8:57 Local youtube webdev teacher has a sudden stroke mid tutorial. More info after this short commercial break...

[@gamepacked]

Just found you for the first time. Learnt quite a lot and had a little laugh! Keep it up bro!!

[@talhaahmed1689]

8:57 Now I just want to try that glitchy effect.

[@govindsamadram4832]

I am so lucky that you have a youtube channel. I get to learn a lot from you. Nice work!

[@Liviu05F]

Hello, Dev ED! I am so happy that youtube recomanded me your videos! Wanted to start a course on Udemy for HTML and css but I changed my mind because I REALLY love how you explain the things! You are so good man! I will buy your bundle course right now and I hope I will not regret this! Cheers !!!!!

[@nxte8506]

I do graphics programming as well as web development and I like how this guy changes the perspective from orthographic projection to a model view projection. That's kinda sick but also priceless 😂.

[@deaddoctor]

This hair style.

[@petropzqi]

We all have it nowadays

[@Nexus-rt1bm]

@@petropzqi true

[@phat80]

I have the same 😂

[@IvoTsochev]

Great video Ed! So excited about the React course!!!

[@atlasdev]

16:37 lmao "stretch out my bottom" that's nice XD

[@MaziSaidSo]

lmao

[@simons1992]

Cannot believe I never came across you before. Your humor makes this stuff even more interesting. 'izz a shoee'. Good on ya mate

[@grassIand]

8:57 When a software engineer trying to dance

[@CesarPeron]

😂

[@devlouis6929]

This guy's ideas are just WOW Keep up the good work bro

[@rutvikshah4589]

Waiting for react course 🔥🍻

[@daanbalm]

kzbin.info/www/bejne/mnjGpHuDjceGhaM its not a course I guess, but might help

[@rutvikshah4589]

@@daanbalm Hey Daan, thanks for sharing! I know react and have 2 years of experience as a MERN STACK developer. Just waiting coz now I want to play with some animation using framer motion or gsap and that's what he has included in his course 🙂

[@daanbalm]

@@rutvikshah4589 sounds cool now I will also be waiting for that

[@richardchu3916]

@@rutvikshah4589 same, there is tons of reactjs courses out there, but not many include variety of js animation library working IN reactjs.

[@chhiethearith9525]

Am wait too

[@candidfarmer425]

Pretty Neat and Awesome... In fact, this video makes you relax and wows our mind. Keep it up comrade!

[@franciscoserio5788]

15:33 "This looks like me grades in school..." 😂 How to add shadows -> Describe your grades in rgba format

[@brunopais9030]

First let me congratulate you for the channel. You have great way of explaining everything and the relaxed and funny comments are a great plus. This tutorial is so successful that LinkedIn is swarming of 3D cards. Keep up the great work.

[@MrNison79]

8:57 the best moment ever!!!

[@shedsoncode]

your videos are so easy to follow, and thanks for the tutorial really helpful

[@stefanli5715]

This is the most amazing video I have ever seen in my god damn life

[@nanibaka2940]

still can't believe this was so easy I've been trying to go in js animation but everyone made it seem harder than it is

[@AxianTee]

when you do shortcuts, you should say what those are.

[@sharriceowens913]

i HAD to pause the video just to say u are so sweet AND like the best teacher ...please keep it coming!

[@tim.bogdanov]

hair is 🔥

[@mstjepan7237]

Its really amazing how better tutorials are when you add some humor like this

[@serioussam9400]

Price up your course. If I was a millionaire I could've bought your invaluable courses with million dollars. Your courses deserve to be priced higher. Don't undervalue them. So you make it free(don't worry since free courses are available) and if you want to put a price on it then please don't undervalue it. Love and respect

[@serioussam9400]

@@crazydev.2634 You are the one being obstacle . I wasn't talking to you. Don't waste my time. Be grateful that you are still alive or something. Delete your comment so that I can delete mine.

[@briancardona344]

That was amazing. Thanks for showing us the text in large size, it is really useful to see and understand the code better. Thank you very much.

[@adilbendaoud9148]

for some reason the translateZ not working !! hmmm WHY U DO DIS?

[@Cho1279624]

In my case, it worked when I moved some CSS code into somewhere and added new CSS code. First, I moved "perspective: 1000px;" of ".body {}" into ".container {}". Second, I added "transform-style: preserve-3d;" to ".sneaker { }". Lastly, I created a new CSS code, ".info {}" and added "transform-style: preserve-3d;" to it.

[@shett8320]

@@Cho1279624 it worked with sneaker, but not with text :(

[@lzszl]

It's not just that rotateX takes Y coord, you also need to negate it! That's why there is that jump when you hover into the area.. remember that what you are doing is mapping the coordinate space of the screen to that of the center of the area. Happy Coding

[@dwaynedlamini9571]

Hey, I need help. Could you assist with this code. Cause I can't seem to get my project to display the 3D perfectly

[@cookiebinary]

27:44 "perfect, very nice"?? are you sure? why don't you wrap that 'card.style.transition = "none";' into setTimeout(() => {}, 500); which will cause smoother "mouse enter" effect

[@elfenlieder]

Never saw a video of yours. Never did this before... but I subscribed after watch literally only 30 seconds of this video.

[@iQaz2011]

8:56 hhhhhhhhh thats funny

[@Bluemoth]

Why does the 'card.style.transform' value only work when wrapped inside curling quotes as per the video? where as straight quotes do not work (I do like consistent straight quote usage). Very interested, as they are the only values that are quoted like that. I suspect it is related to the editor automatically changing the single quotes to double quotes at timestamp 18:40 (both are straight quotes though), but as it does make a functional difference using curling quotes, I wondered why this is making a difference.

[@iliasp4259]

8:56 You are welcome

[@mrkhan43]

Wow! your learning style is super awesome, I watched the whole video even I am a full time Welder.

[@akifcankara2225]

9:40 my life

[@Atu3909]

Hi! Nice techniques! You could use a short setTimeout to remove transition from the card when mouse-entering the container to smooth the entering.

[@imjulianeral]

16:37 XDDDDDDDDDDD

[@robertoverbey3202]

That flicker effect demonstration was incredible! Bravo!

[@alexanderborisov1828]

8:57 when your code is not working

[@PythonPlusPlus]

The rotation effect can definitely be improved to be more responsive. Maybe mapping the xAxis and yAxis from -width/2 to width/2 -> -30° to 30°. It may also be nice to logarithmically scale the rotation so that the effect becomes weaker as you move your cursor away from the card.

[@आशुतोषाय]

Iz a shoe 😂😂😂

[@ahmadalharbi9097]

Ed is the Master of the JavaScript

[@FlorianEagox]

Did anyone else start having a mild anxiety attack when he started copy-pasting code instead of using an array?

[@suhaskamble2320]

use alt + Z for word wrap. It helps a lot

[@patrickbroaden9820]

TIMES UP...MOTHER.ECT...🤣🤣🤣🤣

[@gouravgoutam6309]

Seen hundreds of videos but this stuff that you created is crazy ( I mean damn Awesome ). Request yo to never stop making videos

[@RahulMuley]

WOW! That's cool and simple. Nicely explained. Please do some more such animations. Thank you.

[@CodingAfterThirty]

Great tutorial. Thank you. Looking forward towards the React course.

[@LeatherClass]

Super cool animation effects - love it! Learning so much here. Thank you!

[@tharindudasun7233]

This one is awesome. 😀😀😀Good luck bro..

[@edsonsilva8397]

Thanks a lot Ed, just love your content bro. Keep doing great!

[@alexcozer3921]

Thanks! Even though I don't know English, I can learn a lot about HTML CSS JAVASCRIPT from your videos. Good for you.

[@dereksimmons7041]

Firefox and Edge will show the animation but with difficulties. Firefox and Edge don't support the CSS perspective property. Despite that, I believe it is a great tutorial video. I'm very happy I subbed!

[@josephpiouskowura3461]

Very helpful tutorial keep doing more sir !🤗

[@sebastienmorin9020]

Great video Ed! As usual.

[@369vkr]

Hi, I am a retired doctor, out of curiosity watched your latest post, then I spent till 1am. You are gifted genius. Keep up the good work. Bless you.

[@barunbhattacharjee947]

This is an awesome video, learned a lot from this. But I find a small problem in the card animation section of the js file. For instance, if I want to add multiple cards then this technique will not gonna work. To solve this problem, you could follow the following instructions. Calculate the mouse position from the center of the container element. let centerX = container.offsetLeft + container.offsetWidth / 2; let centerY = container.offsetTop + container.offsetHeight / 2; Then find the distance of the mouse pointer from the center of the container. let distanceFromCenterX = e.pageX - centerX; let distanceFromCenterY = e.pageY - centerY; Then -- card[element].style.transform = `rotateX(${distanceFromCenterY/25}deg) rotateY(${distanceFromCenterX/15}deg)`;

[@christinadyrehauge1292]

This was just what I needed! Thanks a lot! :D

[@barunbhattacharjee947]

@@christinadyrehauge1292 You're most welcome.

[@christinadyrehauge1292]

​@@barunbhattacharjee947 Quick question - I have to identical cards. Only the first one works with the animation. I have not used the card[element] as you did. What am I suppose to put in as the [element]?

[@barunbhattacharjee947]

@@christinadyrehauge1292 Actually, I am iterating through all of the cards. If you are using two cards then still you should use an iterator. Otherwise, you will end up repeating codes. Complete Code: const inner_container_elements = document.querySelectorAll('.inner-container'); const card_elements = document.querySelectorAll('.card'); //Moving Animation Event ln = inner_container_elements.length; for(let element=0; element { //console.log(e.pageX, e.pageY); let centerX = inner_container_elements[element].offsetLeft + inner_container_elements[element].offsetWidth / 2; let centerY = inner_container_elements[element].offsetTop + inner_container_elements[element].offsetHeight / 2; let distanceFromCenterX = e.pageX - centerX; let distanceFromCenterY = e.pageY - centerY; card_elements[element].style.transform = `rotateX(${distanceFromCenterY/25}deg) rotateY(${distanceFromCenterX/15}deg)`; }); }

[@christinadyrehauge1292]

@@barunbhattacharjee947 Ahh okay I see! Thanks! :D

[@debbounourichrab8960]

awesome tutoriol!!! thank u

[@saikiran_]

effort on explaination at 8:57 is gold

[@divakarsingh7487]

Luv u bro....... The way you explain itz very helpful...... Waiting 4 Flutter course

[@nebojshakilibarda874]

you didnt make transform for button thats why it snapped like that w/o easy in or out.. I love these videos :D keep it up :D

[@sasha-kravets]

If translateZ isn't working for you, add "transform-style: preserve-3d;" to .card, .sneaker, and .info.