• Thursday , 28 May 2020

Smooth Page Transitions With Javascript Tutorial

Code Canyon



#pagetransitions #web development #javascript

Today we are going to build out a website and adding smooth page transitions using javascript. We are going to use highway.js to create the page transitions between the html pages and gsap to add animations.

Since this page transition library uses modern ES6 we are also going to cover parcel to bundle everything up together for us.

Check out HighwayJs: https://github.com/Dogstudio/highway/

❤Become a patreon for exclusive videos and more!
https://www.patreon.com/dev_ed

📕 Things covered in this video:

– How to create smooth page transitions
– Learn to use highway.js for page transitions
– How to add animations to our page transitions with gsap
– Bundling everything with Parcel.js

📔 Materials used in this video:

Starter Files: https://github.com/DevEdwin/page-transitions-js

🛴 Follow me on:

Twitter: https://twitter.com/deved94
Instagram: https://www.instagram.com/developedbyed/
Github: https://github.com/DevEdwin

🎵 Music:

Outro:
LAKEY INSPIRED – Me 2 (Feat. Julian Avila)
Music By: https://soundcloud.com/lakeyinspired

Intro:
Dj Quads
Track Name: “Every Morning”
Music By: Dj Quads @ https://soundcloud.com/aka-dj-quads

Creative Commons — Attribution-ShareAlike 3.0 Unported— CC BY-SA 3.0
http://creativecommons.org/licenses/b…

Original source

3d Ocean

Related Posts

29 Comments

  1. Abdullah Deshmukh
    December 5, 2019 at 07:29

    Hello there my gorgeous friends on the internet

  2. #Team_Alara Joel
    December 5, 2019 at 07:29

    Your speech is wonderful. Thank you for this. But what about this kinda transition on the same page. I want my contents transitioning in and out on scroll down and up

  3. #Team_Alara Joel
    December 5, 2019 at 07:29

    Beyond the wall??? Don't you dare go there bro LOoooooool

  4. pankaj rawat
    December 5, 2019 at 07:29

    Did not get ?? 😓😓

  5. Alfredo Francisco Gomes Malaba
    December 5, 2019 at 07:29

    I have an error when running "parcel index. html" please help.
    Thanks in advance

  6. Vladimir Sherstyuk
    December 5, 2019 at 07:29

    Чувак! Ты нереально крутой !

  7. Adrain Wolfe
    December 5, 2019 at 07:29

    Back button doesnt properly remove viewers. Can anyone help? :c

  8. Brai
    December 5, 2019 at 07:29

    I always watch these types of videos, but I never know if I can apply these things to frameworks like React. Can someone answer my extremely noob level question.

  9. VeryVeryBlackGuy
    December 5, 2019 at 07:29

    Why everytime i see times new roman font, my eyes bleed?

  10. pot btw.
    December 5, 2019 at 07:29

    Where are you from? I think I hear an accent 😀

  11. Pedro Diehl
    December 5, 2019 at 07:29

    Really loved this tutorial, are those pages responsive Ed?

  12. Kamil B
    December 5, 2019 at 07:29

    Dev , It is posible to do it in react ? xD I'm still trying…

  13. CINTRON
    December 5, 2019 at 07:29

    High level explanation of what I gathered from literally skimming through the video for about 10 seconds.
    Put pages in containers, give pages an enter animation that calls a function when that animation is done. Create a router to load new pages in above the current page and listens for done callback. When the callback is received the router can drop the old page.

    Looks like you're using a framework called highway to do this but I think that's the basic concept.

  14. Wisdom Bright
    December 5, 2019 at 07:29

    Your just funny and exciting in your own way. I love you're personality and that's why I subscribed to your channel.

  15. Celestial
    December 5, 2019 at 07:29

    I need help with installing the packages at the start of the video

  16. Ruichi Wu
    December 5, 2019 at 07:29

    Thank you, you are so good!

  17. DreamCode
    December 5, 2019 at 07:29

    awesome vidoe 👍

  18. pv Thakur
    December 5, 2019 at 07:29

    hlo bro which web-side are used in for backgroung are download

  19. aaron sisracon
    December 5, 2019 at 07:29

    Hi sir i really like your videos its really helpful for me. Thank you!

  20. ArchiPLays
    December 5, 2019 at 07:29

    Imagine how cringe it would be if someone put a javascript file on a <link> element LOL

  21. Malek Farag
    December 5, 2019 at 07:29

    Great video! I learn so much from this channel 🙂
    Is there a similar way to do this in a different view engine like hbs?

  22. Rahul Roy
    December 5, 2019 at 07:29

    Hi…I just want to know that it would work properly if we use yarn…btw your videos are great and inspiring for a student like me

  23. vj andy
    December 5, 2019 at 07:29

    Great video…!!!
    But in my case i got error "parcel : command not found"

  24. Muhammad Irva
    December 5, 2019 at 07:29

    Hey can you teach me, how to make ilustration svg for website

  25. Anthony Placidon
    December 5, 2019 at 07:29

    Thabks for taking the time to make this! Your pace is good and you really know how to entertain.

  26. Isaac De Lima
    December 5, 2019 at 07:29

    Thumbs down for the mother comment

  27. Alish Safarli
    December 5, 2019 at 07:29

    Hi dude I got this error at the beginning lol

    https://ibb.co/CWfQvTv

  28. Yash Raval
    December 5, 2019 at 07:29

    Hey, could you please post the js file?

  29. Garret George
    December 5, 2019 at 07:29

    your tab is too long, the official recommendation for html is a tab of 2 spaces

Leave A Comment

You must be logged in to post a comment.