Page Animations With Javascript Tutorial

Подписаться 941 тыс.

Просмотров 507 тыс.

50% 1

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.
Today we are going to learn how to do some javascript animations using GSAP. TweenMax is used to animate all the css properties with javascript and TimelineMax is used to chain together multiple animations and create sequences.
if you want to add some animations to your website then I highly recommend you to follow along and implement it in your own projects. You can use this effect to create page transitions or page animations in general.
🛴 Follow me on:
Twitter: / deved94
Instagram: / developedbyed
Github: github.com/Dev...
#javascript #animation

Опубликовано:

21 окт 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 896

@developedbyed 5 лет назад

Should we do more animations?

@naumanali6580 5 лет назад

yes please

@sekirogenshiro2210 5 лет назад

OF COURSE!

@andylib 5 лет назад

Yes! Always 😊

@Rensoconese 5 лет назад

YEEEEEEEEEEEES! I LOVE HOW YOU TEACH!

@mohamadasfour6007 5 лет назад

yes of course.. please

@deeppanchal1332 5 лет назад

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 5 лет назад

@BloodyClash 5 лет назад

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

@MaddoxSt33 5 лет назад

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 5 лет назад

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 5 лет назад

@@MaddoxSt33 Nicee... I use that too

@azharuddin744 4 года назад

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

@juliocodes 5 лет назад

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

@emaaadelgado 5 лет назад

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

@trevormuhoni8774 5 лет назад

Man I could watch your tutorials the whole day

@abhishektyagi4428 5 лет назад

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

@JS-ym1tp 4 года назад

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.

@danteDeveloper 5 лет назад

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

@ЕленаБарсукова-ь3щ 5 лет назад

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

@composeartlikeaghostofmoza2463 4 года назад

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

@mdgmkaderjeem9379 3 года назад

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

@soniauduma1640 3 года назад

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

@sinaasghari6819 3 года назад

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

@sinaasghari6819 3 года назад

@@fftvmedia23 now on 602k hahaa

@salaar_ 2 года назад

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

@bravefart651 2 года назад

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 👍

@oliverilmjarv1340 5 лет назад

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

@sivamylapilli9497 5 лет назад

Nice the clarity u have is awesome sir

@SoloAnn 3 года назад

Thank you for existing Dev Ed ♥️

@SamuelHumeau31 4 года назад

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

@neoTriny 4 года назад

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

@ValentinTruta 3 года назад

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 3 года назад

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

@kevint6878 5 лет назад

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

@inesborges4857 3 года назад

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

@TheGoat-hr2qf 5 лет назад

Your channel is growing fast, congrats for that!!

@mohammedalbj4268 4 года назад

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

@Mwtorres89 Год назад

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

@bratwurst7774 5 лет назад

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

@Smahzy313 3 года назад

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

@macek2383 5 лет назад

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 5 лет назад

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

@milleniummoses 5 лет назад

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

@lucas.campora 5 лет назад

How? 🤔

@milleniummoses 5 лет назад

@@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 5 лет назад

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

@bobdpa 5 лет назад

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

@aqynbc 5 лет назад

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.

@ankurharna1 5 лет назад

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

@guddetiajaymanikanta 5 лет назад

same here...!!!!

@joel9909 4 года назад

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

@vinayakrajkhare1780 3 года назад

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

@Webtricker 2 года назад

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 5 лет назад

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

@amirhosseinahmadi3706 5 лет назад

He is middle eastern confirmed

@veryrisku1119 5 лет назад

He is African confirmed

@Andra9218 5 лет назад

He is latino AND caribbean confirmed

@ugurkoc3030 5 лет назад

He is Japanese confirmed...

@ShillBullshit007 5 лет назад

He is Leprechaun confirmed ;D

@wwt17 5 лет назад

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

@gabrielesu 5 лет назад

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.

@shloimesimchenager6898 3 года назад

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

@noxious7296 5 лет назад

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

@kirankumaruppuganti 5 лет назад

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

@victordesouzacampos3134 4 года назад

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

@deltondias5046 4 года назад

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

@akinpelumi717 3 года назад

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

@arpadgellertsiklosi3811 3 года назад

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

@samasef821 5 лет назад

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!

@vikassuthar9017 4 года назад

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

@Shikigami6 5 лет назад

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

@oswhytecodes1 2 года назад

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

@rasulali4690 4 года назад

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

@neriusshaqiri1514 3 года назад

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

@EmadElSammad 4 года назад

18:26 How did the code got suddenly organized like that after you hit save? Please anyone knows?

@pedromartins9049 4 года назад

VSCode has code formatting features built-in. It also has addons/plugins like Prettier+ that also do that in a slight different way. The shortcut for me is SHIFT-ALT-F. I don't rememeber if you need to activate anything. Good luck.

@EmadElSammad 4 года назад

The plugin called: ”Prettier”? What a great name. Will install it. Thank you very much for your reply!

@manamnice 5 лет назад

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

@kartikmalik1783 3 года назад

the sound of keyboard is sooo nice!!

@maduenox 5 лет назад

Inspirational the way you found out the love for animations hehe

@mohamedshuaau632 3 года назад

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

@jasonesquivel7935 5 лет назад

It looks so cool yet very simple.

@suchanachakrabarti6783 4 года назад

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

@mayankgupta5842 4 года назад

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

@arnab92 4 года назад

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

@cubingwithabhinav8517 3 года назад

Wow animation. Looking excellent.

@its_just_me_ 5 лет назад

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

@michaelmurimwa5269 5 лет назад

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

@MCsupernova22 5 лет назад

Animations are the best. Love how you teach!

@mickaellutin2591 3 года назад

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)

@hussainabid6351 5 лет назад

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?

@lzyrzkl3841 5 лет назад

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

@ViratKohli-jj3wj 5 лет назад

Hi I am Virat Kohli Captain of Indian Cricket Team hahahahahahaha

@michaelcastillo4402 3 года назад

It is amazing. I love your designs.

@rennesinternet3872 4 года назад

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 ;)

@nicobonora4093 3 года назад

Awesome tutorial, as always!

@abicinemafood 4 года назад

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

@joaquinfarfan9069 2 года назад

love the videos you do man thank you for this!

@cnsnmy 4 года назад

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

@AhmadAlMutawa_abunoor 5 лет назад

You added the animation of the hamburger and headline but accidentally switched the parameters of easing with delays. You typed the delays in place of the easing. am I right? or is that the JS library is very flexible and can detect easing vs. delays and acts upon them?

@theamjolnir9641 5 лет назад

These are some high quality guides!!!

@thatguycheddar 5 лет назад

Keep these tutorials coming!! very dope!!!

@SyncWithSrikanth 5 лет назад

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

@vinayakrajkhare1780 3 года назад

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 3 года назад

@azizkhujakhujaev2598 5 лет назад

Woooow man I like this episode epically @0:36

@canersanli 4 года назад

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

@olivierhullaert9099 4 года назад

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

@sirisiri2416 3 года назад

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

@hakbuddy5541 4 года назад

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 4 года назад

Appreciate it!

@arghyabiswas3225 3 года назад

You have godlike animation skills I like your animation

@smokinghot5373 5 лет назад

The value from this video alone is worth $10k

@iamhtmldeveloper 4 года назад

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

@rathernotdisclose8064 5 лет назад

Thanks for introducing me to gsap, its freakin awesome.

@deepanshusharma8321 3 года назад

you are the best teacher ever

@PablxVillarreal 4 года назад

Dude, your videos are awesome!

@adarshgoldar 5 лет назад

We need more tutorials like this tutorial. 😀

@syedakmalali1844 5 лет назад

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

@Amar11115 Год назад

2:54 you have now above 800k subscribers. Where is that car now?😂 Thanks for the video!

@yetibop Год назад

Needed these videos thank you!

@benlowrey 4 года назад

thanks very much. great tutorials. big fan.

@milkdrom3da Год назад

You are so funny, an talented. Thanaks for posting this!

@moizkhalid2714 5 лет назад

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

@kareemjeiroudi1964 4 года назад

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

@mertaktas3024 5 лет назад

love your videos , thanks for sharing man !

@eliendongo9566 3 года назад

Thanks a lot for this wonderful tuto

@allwyndsouza5633 4 года назад

You are a lifesaver man thanks for the video😊

@uxui_mayur815 5 лет назад

Yes, Brother! WE WANT MORE ANIMATIONS!❤❤❤..Even I Love the front-end stuff like Animations, graphics, and all that creative stuff on websites that we create! Much Love! 💚💚💚

@bamaadaa 4 года назад

Now we want to see your VW Van!

@sravankumar6974 5 лет назад

Awesome!! Was waiting for this from you from the past few days.. Also Pls do a video on Barba JS.

@Dreez 5 лет назад

love your vids, easy and good looking

@Alessandro-nq3tm 5 лет назад

I love your style ... Subscribed! :)

@mukeshpandey9993 5 лет назад

Awesome tutorials I loved your code

@cesarp6761 5 лет назад

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!