Smooth Page Transitions With Javascript Tutorial



Check out my courses here!
https://developedbyed.com

#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

Microphones I Use
Audio-Technica AT2020 – https://geni.us/Re78 (Amazon)
Deity V-Mic D3 Pro – https://geni.us/y0HjQbz (Amazon)
BEHRINGER Audio Interface – https://geni.us/AcbCpd9 (Amazon)

Camera Gear
Fujifilm X-T3 – https://geni.us/7IM1 (Amazon)
Fujinon XF18-55mmF2.8-4 – https://geni.us/sztaN (Amazon)

PC Specs
Kingston SQ500S37/480G 480GB – https://geni.us/s7HWm (Amazon)
Gigabyte GeForce RTX 2070 – https://geni.us/uRw71gN (Amazon)
AMD Ryzen 7 2700X – https://geni.us/NaBSC (Amazon)
Corsair Vengeance LPX 16GB – https://geni.us/JDqK1KK (Amazon)
ASRock B450M PRO4 – https://geni.us/YAtI (Amazon)
DeepCool ATX Mid Tower – https://geni.us/U8xJY (Amazon)
Dell Ultrasharp U2718Q 27-Inch 4K – https://geni.us/kXHE (Amazon)
Dell Ultra Sharp LED-Lit Monitor 25 2k – https://geni.us/bilekX (Amazon)
Logitech G305 – https://geni.us/PIjyn (Amazon)
Logitech MX Keys Advanced – https://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.

📕 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…

35 thoughts on “Smooth Page Transitions With Javascript Tutorial

  1. My jQuery version:

    HTML:
    <div class="page" style="background-color: lightblue;">
    <b>Page 1</b><br />
    <a href="HtmlPage2.html">Goto page 2</a>
    </div>

    CSS:
    html, body {
    overflow: hidden;
    margin: 0;
    padding: 0;
    }
    html, body, .page {
    width: 100%;
    height: 100%;
    }
    .page {
    display: none;
    position: absolute;
    overflow: auto;
    padding: 8px;
    }

    JS:
    $(function () {
    // The height of the page when it scrolls into the screen
    const initialheight = 4;
    var LoadPage = function (href, doneCallback) {
    // Do a ajax call to get the new page
    $.ajax(href)
    .done(function (data) {
    // Filter new page from reply
    var start = data.indexOf("<body>") + "<body>".length;
    var end = data.indexOf("</body>");
    var bodydata = data.substring(start, end);
    // House body data in div, so it can be parsed to a DOM object
    var body = $("<div>" + bodydata + "</div>");
    // Find new page inside body object
    var newpage = body.find(".page").first();
    // Do the callback with the new page
    doneCallback(newpage);
    });
    }
    var ClickLink = function (e) {
    // Get the url of this link
    var url = $(this).attr("href");
    // Get the old page in which the link is clicked
    var oldpage = $(this).parents(".page").first();
    // Load the new page from url
    LoadPage(url, function (newpage) {
    // Append the new page to the body
    $("body").append(newpage);
    // Transition to the new page
    TransitionToPage(oldpage, newpage);
    });
    // Prevent default link behaviour
    e.preventDefault();
    return false;
    };
    var TransitionToPage = function (oldpage, newpage) {
    // First hookup hyperlinks on the new page
    newpage.find("a").on("click", ClickLink);
    // Get the dimentions of the body
    var bodywidth = $("body").outerWidth();
    var bodyheight = $("body").outerHeight();
    // Setup new page on top and out of screen
    newpage.css("left", (bodywidth * -1) + "px");
    newpage.css("top", ((bodyheight – initialheight) / 2) + "px");
    newpage.css("height", initialheight + "px");
    newpage.css("z-index", 1);
    newpage.show();
    // Animate new page to left into the screen
    newpage.animate(
    {
    left: "+=" + bodywidth
    },
    function () {
    // Then animate page to open (move top up, and expand height)
    newpage.animate(
    {
    top: "-=" + ((bodyheight – initialheight) / 2),
    height: "+=" + (bodyheight – initialheight)
    },
    function () {
    // Then reset the z-index for the next animation
    newpage.css("z-index", 0);
    newpage.css("height", "100%");
    if (oldpage != null) {
    // Remove the old page from the DOM to save memory
    oldpage.remove();
    }
    });
    });
    };
    // Search first page on initial load of script
    var firstpage = $(".page").first();
    // Transition from empty body to that page
    TransitionToPage(null, firstpage);
    });

  2. 1:42 ya me trabé 🙁 lo ingreso y me aparece en rojo lo de abajo:

    node : El término 'node' no se reconoce como nombre de un cmdlet, función, archivo de script o programa ejecutable. Compruebe si escribió correctamente

    el nombre o, si incluyó una ruta de acceso, compruebe que dicha ruta es correcta e inténtelo de nuevo.

    En línea: 1 Carácter: 1

    + node -v

    + ~~~~

    + CategoryInfo : ObjectNotFound: (node:String) [], CommandNotFoundException

    + FullyQualifiedErrorId : CommandNotFoundException

  3. So I install the package.json file but can't get past -g parcel-bundler. Nothing installs after that and I get a bunch of "npm error!". Does anyone have any solutions to get past this?

  4. damn dude I love your attitude 😂 Ur really so friendly not a boring teacher at all in every intro i can't resist pausing da video (or sometimes leave it running lol) and go smash dat like thumb 👍♥️😂

Leave a Reply

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