Page Animations With Javascript Tutorial

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

[@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!

[@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

[@trevormuhoni8774]

Man I could watch your tutorials the whole day

[@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

[@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.

[@ЕленаБарсукова-ь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,,,,,,,,,,.

[@danteDeveloper]

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

[@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 👍

[@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

[@inesborges4857]

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

[@bobdpa]

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

[@sivamylapilli9497]

Nice the clarity u have is awesome sir

[@kevint6878]

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

[@mohammedalbj4268]

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

[@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

[@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

[@Mwtorres89]

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

[@Smahzy313]

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

[@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!!

[@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

[@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 ♥️

[@shloimesimchenager6898]

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

[@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.

[@akinpelumi717]

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

[@mohamedshuaau632]

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

[@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

[@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!

[@kirankumaruppuganti]

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

[@arpadgellertsiklosi3811]

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

[@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?

[@noxious7296]

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

[@ankurharna1]

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

[@guddetiajaymanikanta]

same here...!!!!

[@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

[@victordesouzacampos3134]

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

[@vikassuthar9017]

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

[@wwt17]

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

[@neriusshaqiri1514]

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

[@deltondias5046]

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

[@Shikigami6]

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

[@michaelmurimwa5269]

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

[@manamnice]

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

[@OrincyWhyteDesigns]

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

[@kartikmalik1783]

the sound of keyboard is sooo nice!!

[@suchanachakrabarti6783]

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

[@mayankgupta5842]

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

[@smokinghot5373]

The value from this video alone is worth $10k

[@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

[@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?

[@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

[@maduenox]

Inspirational the way you found out the love for animations hehe

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

[@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)

[@cubingwithabhinav8517]

Wow animation. Looking excellent.

[@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!

[@lzyrzkl3841]

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

[@ViratKohli-jj3wj]

Hi I am Virat Kohli Captain of Indian Cricket Team hahahahahahaha

[@jasonesquivel7935]

It looks so cool yet very simple.

[@its_just_me_]

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

[@MCsupernova22]

Animations are the best. Love how you teach!

[@benlowrey]

thanks very much. great tutorials. big fan.

[@deepanshusharma8321]

you are the best teacher ever

[@Amar11115]

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

[@canersanli]

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

[@yetibop]

Needed these videos thank you!

[@orlakasali9755]

Can't find either the timelinemax or tweenmax in the gsap library. Help me out, I really need this to work!

[@SanjeebLama]

Try this link: cdnjs.com/libraries/gsap/2.1.3

[@pierre-louis2711]

@@SanjeebLama Thanks a lot dude

[@SanjeebLama]

@@pierre-louis2711 I am glad i could help. Good Luck!

[@orlakasali9755]

@@SanjeebLama Thanks so much!

[@cnsnmy]

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

[@arnab92]

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

[@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

[@nicobonora4093]

Awesome tutorial, as always!

[@joaquinfarfan9069]

love the videos you do man thank you for this!

[@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!

[@azizkhujakhujaev2598]

Woooow man I like this episode epically @0:36

[@arghyabiswas3225]

You have godlike animation skills I like your animation

[@nadin3amanda]

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

[@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

[@kuwago8633]

im just gonna bookmark your entire channel...

[@michaelcastillo4402]

It is amazing. I love your designs.

[@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!

[@mascode1]

Amazing Dev!

[@thatguycheddar]

Keep these tutorials coming!! very dope!!!

[@kareemjeiroudi1964]

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

[@olivierhullaert9099]

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

[@theamjolnir9641]

These are some high quality guides!!!

[@PablxVillarreal]

Dude, your videos are awesome!

[@iamhtmldeveloper]

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

[@webstroymaster]

Very cool Ed!

[@bamaadaa]

Now we want to see your VW Van!

[@sravankumar6974]

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

[@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

[@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

[@eliendongo9566]

Thanks a lot for this wonderful tuto

[@rathernotdisclose8064]

Thanks for introducing me to gsap, its freakin awesome.

[@sovereignlivingsoul]

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

[@allwyndsouza5633]

You are a lifesaver man thanks for the video😊

[@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