Javascript Animations - Design & Build A Website Crash Course

Check out my courses and become more creative!
developedbyed....
🎁Support me on Patreon for exclusive episodes, discord and more!
/ dev_ed
Microphones I Use
Audio-Technica AT2020 - geni.us/Re78 (Amazon)
Deity V-Mic D3 Pro - geni.us/y0HjQbz (Amazon)
BEHRINGER Audio Interface - geni.us/AcbCpd9 (Amazon)
Camera Gear
Fujifilm X-T3 - geni.us/7IM1 (Amazon)
Fujinon XF18-55mmF2.8-4 - geni.us/sztaN (Amazon)
PC Specs
Kingston SQ500S37/480G 480GB - geni.us/s7HWm (Amazon)
Gigabyte GeForce RTX 2070 - geni.us/uRw71gN (Amazon)
AMD Ryzen 7 2700X - geni.us/NaBSC (Amazon)
Corsair Vengeance LPX 16GB - geni.us/JDqK1KK (Amazon)
ASRock B450M PRO4 - geni.us/YAtI (Amazon)
DeepCool ATX Mid Tower - geni.us/U8xJY (Amazon)
Dell Ultrasharp U2718Q 27-Inch 4K - geni.us/kXHE (Amazon)
Dell Ultra Sharp LED-Lit Monitor 25 2k - geni.us/bilekX (Amazon)
Logitech G305 - geni.us/PIjyn (Amazon)
Logitech MX Keys Advanced - geni.us/YBsCVX0 (Amazon)
DISCLAIMERS:
I am a participant in the Amazon Services LLC Associates Program, an affiliate advertising program designed to provide a means for us to earn fees by linking to Amazon.com and affiliated sites.
This is the final part of the series where we will implement all the dynamic stuff with javascript.
We will also we using GSAP timelinemax and tweenmax to add all the javascript animations.
You can find the source files and images on patreon for free.
🛴 Follow me on:
Twitter: / deved94
Instagram: / developedbyed
Github: github.com/Dev...
#javascript #animations

[@developedbyed]

Thank you so much for taking the time to watch this small little series. It was seriously fun to build something a bit bigger. Modelling tutorial coming on wednesday.

[@anonrana9077]

hey , buddy big fan... can u please provide the source code of whatever u make in each of your episode . so it can help us. thank you

[@earlyman007]

you deserve more subs and more likes❤

[@earlyman007]

@@anonrana9077 dude total things are in his patreon account post you'll find a zip file there u can download it for free

[@anonrana9077]

@@earlyman007 ohh thanks buddy

[@elabinnovations]

♥️

[@RezwanHossain_09]

Traversy media and you!!. Can't think of a day without you guys!! Thanks for being there and inspiring us.

[@greenie62]

A day without is a surefire Trav-Ed-sty. K, that was bad even by Ed's standards. But ya, both guys are awesome... honorary shout-out to Mosh as well.

[@soad2609]

@@greenie62 What is sty?

[@iamzers9022]

Don't miss Fireship and his mema (and puns) xD

[@av03]

man! you are the pewdiepie of programming lol

[@balencibaba4089]

Right?! Is Ed Swedish?

[@35-barodmaftuhniam76]

Wkwkwk i think so :v

[@BlackMessiah122]

​@@35-barodmaftuhniam76 I think he's actually Romanian.

[@vaibhavbhandare6777]

Pewdiepie doesn't respect other than he loves. How can he said anything wrong about any country , culture and peoples. Every one should agree with me on this. He just disrespect My Country .How we tollarate that.. pewd is just an arrogant tuber who disrespect others for no reason

[@Saidur07]

@@balencibaba4089 he's Romanian

[@bafana_mhlamvu]

Crazy how fast your channel grew, keep up the excellent work dude...

[@MS-jn9xj]

New to the channel. Love the humour. Love the Help. Awesome guy 🤘🏿. 👨🏽‍💻. 🤘🏿

[@C4ssstiel]

Though I rarely ever leave a comment anywhere, I have to say THANK YOU. I have been studying WevDev for a while now (Currently undertaking WebDev Course in a University here in Dublin) as well as taking Colt Steele`s course on Udemy, but you are a natural teacher. I`ve learnt so much from your videos (even more than in College so far). Keep up the good work and your happiness when teaching. Hats off to you, mate!

[@justadam3536]

New web developers trying to learn the basics Ed: *WHAT IF MICHAEL JACKSON WAS A WEB DEVELOPER*

[@Voughnfox]

I cannot ask for more... a unique approach how you show it to us. I'm inspired and hopeful that I could one day understand this field of web developing. outstanding content, amazed me a lot and surprise me in a way that I could learn this slowly. Thank you Ed that's the least I could say.

[@warehouse218]

That auto focus at the start before "Hello my gorgeous people" was just amazing

[@raghavherugu6934]

I love ur tutorials so much they are so funny and educational u deserve 10x more subs than u already have :)

[@toberixng]

You are just too much bro, I am going for a technical interview on Monday, I feel this very video is a plus for me to prepare for the interview, thanks a million for this resource.

[@hammoMRx]

Man the positive messages in your videos are soo refreshing, thanks allooottt

[@kisanshah3739]

WE WANT MORE PROJECT LIKE THIS : )

[@stn3042]

the most valuable ~30min (1.5x speed) I've seen in a long time

[@sharoo5877]

I love the work you are doing, its not only informative but also fun as hell!

[@majklzumberi1761]

I loved this series, I hope you make more videos like that 🤩 cheers from Italy 🇮🇹

[@gabrielpaulino9437]

Thx man, i'm from Brazil and i'm learning so much with your videos, your job is superb!

[@C_Ariss]

i finished!!! i watched the video about 100 times over the past month.. but i finished!!! YAAAAAY thank you :)

[@edwardtofan1800]

Hello there gorgeous Ed from the internet.Great tutorial, great explanations, great everything.Thanks, in name of all, for being a consistent presence here on youtube and teach us new things.

[@broskisnajdy]

Just finished this project with you. Coded in VScode next to your video. :D Definitely will buy your courses, great experience. thank you Ed

[@senseicodes]

Hahahah I love that intro Ed. Great work on this series

[@paxis3766]

Wtf did i just watch😂😂. Well done Ed. (I just started learning javascript )

[@martinmtandi335]

Your intro are fire as always.

[@Trazynn]

Bit of a wild goose chase for the project files Ed.

[@TutorialsHub3]

Man, you perfectly know how to teach people in a funny way😂. By the way, this is one of the best crash course I have ever seen😍. Best of luck👍.

[@disicinco15]

Thank you so much for this series! It's been very helpful. I would love to see your next bigger-scale project you teach!

[@YukiGersaniba]

I’ve already set up my Home Page and About Page for my website. Now, I’ll adding in some fun stuff in it!

[@javierquiroga6774]

I finished to watch the episode laying down on my bed. I will follow it later tonight.

[@delalideku7117]

Great work, man. Just love your channel. Keep it up.

[@aqynbc]

Since you are so creative, could you create and acting a 'flashback' video of how you went from Hello World to the impressive level you are at now with the real learning timeline? It would be cool to see the coding you were doing at the beginning to now.

[@kimcodemonkey]

This amazing tutorial. I heard somebody talk about the Gshape but never get to learn it. thanks for sharing.

[@REDEEMED731]

Hi Ed! Big fan of your tutorials here.. also Romanian. You do a great job! Not knowing where else I can share this fix, I will post it here. It prevents the execution of the functions when clicking on the same dot multiple times. Without this fix clicking on the same dot will make the image disappear. //Tracker let current = 0; let scrollSlide = 0; slides.forEach((slide, index) => { slide.addEventListener("click", function() { if (current !== index) { // wrap the next three lines in the if statement changeDots(this); nextSlide(index); scrollSlide = index; } }); });

[@javierquiroga6774]

This is better than a series on netflix.

[@raymarkpatacsil9720]

Exactly!

[@opterimuor1165]

One of my fav dev ed guy

[@junihbhatt]

Man this series was great... 👏🏻👏🏻 Two claps

[@nicksparks3543]

Absolute stella video, always great watching you work.!.

[@angelopantaleon2373]

I Love your tutorial !! it's very clear and straight to the point explanations! gets me more knowledge and makes me creative a lots and the great in here , this is free tutorial

[@sambulelongwenyama9563]

Ed between development and comedy what do you think is your number 1 strength? you are just amazing lol

[@techlead...]

Here comes the climax babyyyyyyyy.💙💙💙

[@halfamoose]

Love the series Ed, thank you!!!

[@Ndzzle]

Love me some Dev Ed in the morning

[@kapil9888]

Thank you so much! It was fun learning with you.

[@alakhdar100]

dud you rock, you really rock, thank you so much for such a great tutorial.

[@NikhilAdiga]

This series was so fun!

[@yohannesgachena6663]

You are my herooo

[@farhanakhtar5229]

when a human ,, is most creative and computer world lover , , then he developed like , (DEV ED) he is amazing person ,, i like his smile and jokes, and he is most creative and iteligent

[@marcosmeneghetti3261]

AMAZING tutorial. Thank you so much, Ed.

[@wandilenxumalo735]

Was I the only one who got excited when Ed fixed the bugs?

[@mr_matata]

nice series, i think you should add numbering to these 3 series video tho

[@creativity158]

Really awesome tutorial, inspired me to start making my own portfolio website, thank you so much for doing this. I even found a bug in this and managed to fix it. If you click on the slide button of the current page it starts the animation but something breaks and doesn't display anything. If you want to fix it just add an if statement at the start of the nextSlide function like so: function nextSlide(pageNumber) { if (pageNumber != current) { ... } }

[@padreigh]

Can you still "wheel" while the animation runs? Guess yes :D Youre getting an abo from now on :) thanks for providing funny and good paced tutorials.

[@sirisiri2416]

Great work, very interesting! On a larger project we can see complexer build out functions, and also how to fix bugs!!! Thanks ;)

[@theharrypeter_xd1237]

I like this type of tutorials..

[@enrich.others]

You got be my first subscriber bro. Really like your videos. Could you continue the series onto how now to get it up and running live? Preferably using WordPress and a hosting provider. Or maybe that's not have one goes about it? You tell me. Or even better, please show me 😄

[@momchil.popovpopov3205]

I am doing magic for 2 years now and I gotta say, that was a clean classic pass. :D

[@farid.mammadov]

You are Awesome man !! Keep it going.

[@duckhorse2563]

Love your tutoring style

[@erikascaceres]

Gracias por todo. Cuando pueda compraré tus cursos. Eres genial

[@HighOnBeats]

Hi Dev Ed, first of all, your tutorials are a great way for learning and practicing Front End Development. In this particular tutorial, I encountered a bug - Say, if we are on slide 1 and click the same circle for slide 1, content just fades away. Can you please help with the solution for this? P.S. learned a lot from this series! Thank you for sharing this course for free

[@valentin_gif]

Loved this little mini-series. As a new aspiring developer/designer this really helped me out and gave me loads of knowledge and inspiration that I can use in future projects! One question tho... The animations break when using @media in CSS to adapt window scaling. Is there a way to fix this so that animations retain function even in smaller scales?

[@orangecode1902]

First time i watched Video on KZbin that has no Dislikes Awesome..!! Love from Pakistan Sir

[@Cyperlina]

YAAY A VIDEO ON MY BIRTHDAY :D

[@lucielaurent5722]

super complex but super amazing!

[@vic-pm3rm]

for those of you who have trouble finding the libraries, here is the link: cdnjs.com/libraries/gsap/latest

[@brandonpaniaguaarmendariz4243]

great work!. , Thank you very much for taking your time and share it with us...

[@muhammadidrees9683]

Thank you for the awesome series... Can you please make a bonus video in which you make this same website responsive. I'm always confused about that part especially from a design point of view not knowing which bits to put where and how of an already existing desktop site... 😬 Thank you 😊

[@hassantariq8847]

Amazing tutorials senpai ❤ kudos 💎

[@maryidowujumoke450]

Best tutorial ever!!!

[@1Aenima]

In function scrollChange you could use modulus operator instead of if: scrollSlide = ++scrollSlide % 3; or scrollSlide = --scrollSlide % 3; Anyway, you are awesome!

[@umersaeed259]

You are a Real Original ❤

[@wassimbelhadjrhouma7979]

I fixed a little bug in this project, it's when we try to click in the current page (try to go to the current page clicking in the current slide) the content will disappear. (sorry for the bad english :p) so to fix that I just added the if statement here: slides.forEach((slide, index) => { slide.addEventListener("click", function() { if (!this.classList.contains("active")) { changeDots(this); nextSlide(index); scrollSlide = index; } }); });

[@olumbasolomon8658]

Wow, you're a life saver

[@demianovalentino6122]

Great video!

[@Charlitoesban]

Nice one buddy. keep it up!!

[@mansipendurkar9116]

wow thankyou so much beacuse of your vdos i have learnt so much !!! thannk you again god bless!!

[@OoKangZheng]

First sofa~~ Awesome tutorial

[@ATIWatchReviews]

where can i now find the js gsap timelinemax and tweenmax files?

[@izumikun6163]

Greatest intro🙌🙌🙌

[@thango209]

Thanks for sharing dude !!!👍👍👍

[@Itsrichayo]

Thank you for this. Bless you.

[@nietypowyinformatyk14]

You are the best!

[@stephanoiucciolino8215]

thanks for everything!

[@tushardeshmukh7253]

Loved it!

[@emiljano1733]

I know I'm 1 year late but any idea why isn't it working for me? It just won't change pages when I clik on the dots on the right... Uncaught TypeError: Cannot read property 'querySelector' of undefined

[@tomiwaale7540]

Awesome guy💪

[@thatguycheddar]

Very dope tutorial!!!

[@invaderjohn]

I would really like to see the source code of this course. I love it and I was trying to build it. Everything is fine, but not the dots, clicking them I get queryselector of undefined, and I can’t see what I’m doing wrong since the class names are the same. I would pay for your Paterson but I lost my job as a Webdesigner 2 month ago and I’m struggling, wanted to make this course to update my portfolio and learn some more JavaScript since that’s were I’m a bit weak. But can’t seem to figure it out and it would mean the world to me to be able to compare the code. I really hope there is a way and if not of course I will continue watching this courses since they teach me a lot. Thank you.

[@SimplifiedTraderofficial]

Bro you are so funny, and very interesting to watch your tutorial

[@dsvhs93]

Is there a playlist with all of these laid out on?

[@a.anvarbekov]

0:13 🤣 keep up the good humour

[@SpinnTV]

This guy is really funny

[@TheBorninmotion]

Awesome tutorial ! Can you make more with tweenmax ?

[@varunv6641]

lmao, these intros are the best

[@bibhushankarki9194]

do some backend stuffs too in this course with node js

[@mahdi3fatihi]

Please can you tell me what is your visual studio code's theme ?

[@TJ80ify]

alot of people really like youtube for this reason

[@pointedwaters947]

Buna ce mai faci! I can speak english too don't worry! I love your channel you are my favorite channel! Keep it up!

[@ajertonmazreku]

Bro please click on the selected dot twice and see the error : P You are the best ;)

[@developedbyed]

If currentPage===nextPage return; 😃

[@funkatfirstsight]

@@developedbyedFacing the same issue. Where should I put currentPage===nextPage return; to avoid this from happening. Thanks so much :)

[@rajdeepgaur7901]

@@funkatfirstsight In nextSlide() function

[@GeorgeLimaaa]

My js wouldn't work for my life. I then experimented replacing your for mine and it worked! I'm still trying to find where I went wrong...

[@NerdyKatsChannel]

You’re pretty funny, great job 👍🏽

[@isaacdonkoh4871]

I really love your video, i would love if you can make video series on react native if it is possible