Page Animations With Javascript Tutorial

[@developedbyed]

Should we do more animations?

[@naumanali6580]

yes please

[@sekirogenshiro2210]

OF COURSE!

[@andylib]

Yes! Always 😊

[@Rensoconese]

YEEEEEEEEEEEES! I LOVE HOW YOU TEACH!

[@mohamadasfour6007]

yes of course.. please

[@deeppanchal1332]

VS code has so many useful shortcuts you can use. For example: m0 for margin: 0; p0 for padding: 0; df for display: flex; jcc for justify-content: center; aic for align-items: center; Hit tab after these shortcuts!!

[@oswwwaldotc]

Ty

[@BloodyClash]

:P i'm old school and prefer dreamweaver which also has all that shortcuts and maybe even moooooooore

[@MaddoxSt33]

Precisely that is not VS Code itself. It is because of Emmet you can add Emmet extension on any code editor and have that fun. :D

[@MaddoxSt33]

More than that there are more usable shortcuts which includes h1.header for h1#header for div>h1.class for div>h1+p for Well there are more but these are the most of the ones i use

[@deeppanchal1332]

@@MaddoxSt33 Nicee... I use that too

[@azharuddin744]

"Everything is zero, just like my life" I felt that

[@juliocodes]

It always surprises me just how much of a difference a simple animation can make when done right!

[@trevormuhoni8774]

Man I could watch your tutorials the whole day

[@emaaadelgado]

I learn more code here than in my entire life :v because you, i have a new job! thanks for everything!

[@abhishektyagi4428]

Sir Could you please make a video explaining the resources you use to learn or enhance your programming skills

[@bravefart651]

Complete beginner here. I like the way you put it all into one, rather than breaking it all up into sections and then trying to fit it all together, plus your voice isn't sleepy 😂 Keep up the good content 👍

[@danteDeveloper]

wow, I'm soooo impressed how you easily do publish this wonderful web page. Thanks a lot

[@JS-ym1tp]

This is one of the best tutorials ever! I've been watching a lot lately and learned so many new tricks with CSS from watching this, plus the js animations I learned.

[@SamuelHumeau31]

For reducing the brightness of the image, you can juste add in the CSS " filter: brightness (80%) " on the image !

[@neoTriny]

can be used also ,background-blend-mode: ; ,property

[@ValentinTruta]

The best and compatible way(safari+iexplore) is to use multiple bg: background-image: linear-gradient(to bottom, rgba(0,0,0,0.3), rgba(0,0,0,0.3)), url('image.jpg');

[@vinayakrajkhare1780]

Hey can u help me ..my ja code is not doing anything like I have included the file but it's just like that no animations can be seen ..pls help

[@oliverilmjarv1340]

love your videos, im more of a back end programmer but you help me get better with front end stuff aswell. Making stuff look pretty has always been my weakness

[@ЕленаБарсукова-ь3щ]

You always make my day with your positive mood :D Thanks for staying awesome! And more animations please!!

[@composeartlikeaghostofmoza2463]

Приятно видеть русскоговорящего здесь)

[@mdgmkaderjeem9379]

Hi I am MD: G M kader jeem From Bangladesh... I am,,,,,,,,,,.

[@soniauduma1640]

watching this video in 2020, hearing you say "we are close to 100k'" when you are now close to 500k!

[@sinaasghari6819]

@@fftvmedia23 now he is 562k isnt that good?

[@sinaasghari6819]

@@fftvmedia23 now on 602k hahaa

[@salaar_]

@@fftvmedia23 its nov 8th 2021 and he is reaching 706k thats wow i think

[@bratwurst7774]

just wanted to say your videos keep me motivated even when im really frustrated cause my code was garbage. what i also like is your approach of showing the many things you can do with js and not just telling how to write an hello world program thx

[@inesborges4857]

"I was fascinated by that motion" lol This guy is very funny. Weird but funny

[@sivamylapilli9497]

Nice the clarity u have is awesome sir

[@Smahzy313]

Woooow, the :: after selector to create opacity just made my day :)

[@Mwtorres89]

I was kind of going through something tough and your flip-flop comment about the animation literally made my day 😂

[@mohammedalbj4268]

the video is on point ...no bullshit ..no talking too much ...you got yourself a new happy subscriber

[@macek2383]

The moment when u used z-index to pop-up the headline at 13:50. You should use rgba with build-in opacity. It wouldn't affect the text. The less z-index u use the happier u are with later project effects.

[@n_fan329]

of maybe just change the sudo element to before and it will do the job , without the help of z-index

[@milleniummoses]

There's also "background-color:" "background-blend mode:"

[@lucas.campora]

How? 🤔

[@milleniummoses]

@@lucas.campora .hero: after { background-color: rgba (0,0,0, .5)} The ".5" is is just an example of a number less than 1 you can put in there.

[@literallybiras]

No. I want to use z index, so in a few months i will be uzing z-index: 9999 cause its cool

[@gabrielesu]

Awesome tutorial. One other cool thing I learnt here was the 'object-fit' css property for an image. I normally would create a div and make the image a background image and use 'background-size: cover' but this is waaaaay better. Thanks.

[@SoloAnn]

Thank you for existing Dev Ed ♥️

[@bobdpa]

"Everything is zero...just like my life" lol 😆

[@aqynbc]

love the feel good factor of your videos. If every body was like you, the world would be a better place ! we can hope! Please keep publishing.

[@TheGoat-hr2qf]

Your channel is growing fast, congrats for that!!

[@kevint6878]

I love these videos. Your method of explaining what each and every thing does is awesome!

[@ankurharna1]

Just came home after office.. I saw your premiere...made my day..

[@guddetiajaymanikanta]

same here...!!!!

[@Webtricker]

You are incredible.Thank you for explaining Page Animations with JavaScript in such a simple and beautiful way. We want more animations tutorial video.

[@chorko696]

"My mom used to throw these foot flops at me when I was a child" Dev Ed is Asian confirmed

[@amirhosseinahmadi3706]

He is middle eastern confirmed

[@veryrisku1119]

He is African confirmed

[@Andra9218]

He is latino AND caribbean confirmed

[@ugurkoc3030]

He is Japanese confirmed...

[@ShillBullshit007]

He is Leprechaun confirmed ;D

[@noxious7296]

Thanks For this wonderful tutorial and On behalf of those who don't want to comment yes we need More Animation tutorials.

[@lzyrzkl3841]

My best tutor ❤️ love from India 🇮🇳 Thanku so much sir

[@ViratKohli-jj3wj]

Hi I am Virat Kohli Captain of Indian Cricket Team hahahahahahaha

[@mohamedshuaau632]

My favorite teacher. I no longer search for something. I search specifically dev ed

[@wwt17]

This guy! One of the best code youtubers there is!!!!

[@shloimesimchenager6898]

I might ask a js course from you for my birthday gift, great work filling my yt recommended

[@joel9909]

This man is amazing. I am laughing and coding at the same time

[@vinayakrajkhare1780]

Hey can u help me ..my ja code is not doing anything like I have included the file but it's just like that no animations can be seen ..pls help

[@victordesouzacampos3134]

More animation!! Please! This is so cool !!! From Brazil!

[@Shikigami6]

Thank you! Your videos are a huge impovement towards becoming a Web-Dev

[@sirisiri2416]

nice tutorials! Go on, great animations! little trick: instead of writing justify-content: center; align-items: center; just write: place-items: center; ;) good work

[@michaelmurimwa5269]

Dude your whole vibe is like that guy from sillicon Valley Richard Hendricks

[@hakbuddy5541]

The reason why i like your videos because in your video i get 2 things : 1) Knowledge 2) Entertainment (Bcz You are Too funny!)

[@developedbyed]

Appreciate it!

[@kirankumaruppuganti]

I really like the animations like this. Please continue doing these kind of video. Thanks

[@kareemjeiroudi1964]

Man, I always hated frontend. Now you encouraged me to improve my frontend skills

[@orincywhytedesigns]

How are you this good? This tutorial is blowing my mind 🤯🤯

[@nadin3amanda]

Those who are here for the animation part for app.js 😅 14:10 Thank you Mr. Dev Ed! I learned a lot

[@arpadgellertsiklosi3811]

Hi, your personality is absolutely friendly and I have got a lot of motivation and information of your videos so thanks so much!

[@smokinghot5373]

The value from this video alone is worth $10k

[@akinpelumi717]

I love how you teach and your animations and designs are awesome. keep up the good work Ed. More animation videos pls

[@rennesinternet3872]

Man its the 1st JS page i really do, works fine with the version of Gsap includin all older Libs, i'm proud to have done it ! Many thanks for that ;)

[@azizkhujakhujaev2598]

Woooow man I like this episode epically @0:36

[@rasulali4690]

Damn bruh u r a diamond! This is so awesome, that u're not a regular boring developer. Floot flops throwing moment had me laughin so hard

[@mayankgupta5842]

Yes Dev this is very useful and attractive animation..Please make more videos or GSAP animation tutorial series

[@arnab92]

Thanks for introducing me to GSAP. I would certainly love more animation videos.

[@deltondias5046]

smashing the like button before the video starts. Its becoming a habit because your content is always amazing.

[@maduenox]

Inspirational the way you found out the love for animations hehe

[@cesarp6761]

I would suggest a video that starts showing the library (animation) and how it works.. instead of all the css training part.. OR if you really want to use 2/3 of the tutorial doing design, you can add a link to the starting point where the content of the 'title' of the video really starts.. and people decide if they want to do the filling or not.. cheers! great channel!

[@vikassuthar9017]

just want to say thank you so much. every video of yours is awesome and it's helping me a lot.

[@samasef821]

I really enjoyed it. It was quite cool and you really spiced it with fun and I before I could realize, I had watched it all. thanks a lot!

[@manamnice]

Bro, I love your tutorials. Keep up the good work.

[@its_just_me_]

86K subscribers!! Congrats mate!! ❤️Love from India 🇮🇳

[@deepanshusharma8321]

you are the best teacher ever

[@kartikmalik1783]

the sound of keyboard is sooo nice!!

[@moizkhalid2714]

Love the easiness of coding..I know it is because of hard hours you put before creating the website again with smoothing effect. Big Fan

[@suchanachakrabarti6783]

Thank you so much for such awesome tutorials...you are one of the best teachers here.

[@canersanli]

Thank you so much, as a beginner on coding I found this very simple and effective 👌

[@jasonesquivel7935]

It looks so cool yet very simple.

[@MCsupernova22]

Animations are the best. Love how you teach!

[@neriusshaqiri1514]

Really great content on all of your videos, learned quite a lot from these , thanks Ed .

[@hussainabid6351]

Hey Dev Ed, I love your videos :) Can you make a complete guide like what equipments you are using to create videos on youtube and how you do the editings?

[@vasiliy.poddubny]

You are very interesting to watch and very informative. Thank you very much for a great lesson from Russia!

[@cubingwithabhinav8517]

Wow animation. Looking excellent.

[@shbita]

Thanks ED Mom for giving birth to Ed, and giving him the inspiration to be a magnificent designer (the method isn't important :)

[@arghyabiswas3225]

You have godlike animation skills I like your animation

[@mickaellutin2591]

I watch your videos since yesterday and its so cool, animations looks so easy when you code !! (im a back end developper and i suxx in animation lol)

[@mostafizurrahman-em5uu]

hey Brother!! i'm mostafizur rahman. i'm from bangladesh,I really love you and I love your tutorial.

[@were_on_the_sidelines4351]

wholesome guy, respect

[@cnsnmy]

You make it very easy to learn and understandable! Thank you!

[@iamhtmldeveloper]

Your techniques is awesome and more helpful for me....... Thanks bro for making different different types videos for us ):

[@SyncWithSrikanth]

One of the best i have seen in recent times. Cool stuff

[@vinayakrajkhare1780]

Hey can u help me ..my ja code is not doing anything like I have included the file but it's just like that no animations can be seen ..pls help

[@vinayakrajkhare1780]

Js

[@ShaunMeechan]

Man I hate being a noob at programming, even little details that aren't covered cause so much hassle for example when you drop the first tweenmin thing in at 1:35 mines doesn't have this 'integrity' or 'cross origin' thing that auto populates. Maybe these things are a given to the adept programmer but not beginners, it's so frustrating because most programming tutorials assume you already know these things when you don't, then you need to spend 40 mins trying to get it sorted when you have a deadline in 2 days SHEESH. Thanks for the video though you awesome!

[@kuwago8633]

im just gonna bookmark your entire channel...

[@abicinemafood]

So I come across to one of your videos once in a while, because I have some tabs open and when I feel like I need to learn something new, I open one. And after a while of not watching your videos, when I see you doing a joke, I feel like I've missed that. Please don't stop making jokes :D

[@musicmoi]

Watching this in 2021. He has 656k subs. I hope he has that van by now!

[@rathernotdisclose8064]

Thanks for introducing me to gsap, its freakin awesome.

[@lenilunderman3697]

Please more videos teaching animation in javascript?! I loved this video!

[@adarshgoldar]

We need more tutorials like this tutorial. 😀

[@parahumanoid]

It's scary how quick he is with this. It's not complicated, but still, it goes to show just how much second nature it is to Ed. It's at the tips of his fingers. I am now in doubt if I'm overcharging for dev time. Anyone know, what is this kind of productivity worth per hour on the US market?

[@thatguycheddar]

Keep these tutorials coming!! very dope!!!

[@tawfeeq00]

I wish you make a tutorial about flutter because you the only one i can understand in youtube

[@theamjolnir9641]

These are some high quality guides!!!

[@michaelcastillo4402]

It is amazing. I love your designs.

[@nicobonora4093]

Awesome tutorial, as always!

[@Yssandra]

Every time you make video like this I want to make another website... Soon I will need big server for all this stuff :D And of course I will appreciate more videos like this! :D

[@olivierhullaert9099]

Thanks Ed, I like your way to teach ! go on . It was really clear.

[@bamaadaa]

Now we want to see your VW Van!

[@lienlinda8017]

So happy~ I can keep up I am new to js, I don't know anything!! thank you~

[@davidramziz3200]

The image you use makes all the difference, used a low res mustang, and man, just not the same. XD

[@sovereignlivingsoul]

I use CSS for CSS, am looking into GSAP, also I owned a VW Westphalia and it was a great vehicle.

[@benlowrey]

thanks very much. great tutorials. big fan.

[@techgizmopro]

Hi Dev ed, Hope you make more "creative web animation". I love you and love your tutorials too. from Vietnam 😘

[@syedakmalali1844]

You are as wonderful as awesome. Thanks for awesome videos. Creative and helpful. A big big thumbs up.