Page Animations With Javascript Tutorial

Video is ready, Click Here to View ×

?Support me on Patreon for exclusive episodes, discord and more!

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:


#javascript #animation

47 Comments on “Page Animations With Javascript Tutorial”

  1. you should share the code of the images …this hole videos tooked me like three hours i…. failed with the css transform: translate(-20%,-70%) didnt worked for me object-fit: cover; didnt worked either

  2. Hey man i'm starting to view your VLOG. I don't know how you like front end design. it just sucks, but i love the way you explain these. im now in love with javascript cos u can do both bck and front . fuck yeah. keep it up.

  3. 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?

  4. Once again, beautifull, easy, honest. You make me wait for a new dev tutorial, and reborn my love for javascript. I begin to learn javascript for 1 month ago. Before discover gsap.
    Love your channel, Ed. Keep growing!!!. Cheers an love from Spain.

  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.

  6. Can you build up on this and do the next video on page transitions. Like when we click on some link on this page..url changes dynamically without page load…page transition happens and new page loads. Current page image and content fades out and new page content and some image fades in

  7. 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!!

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.