Open In App

How to use transition effects in the page ?

Improve
Improve
Like Article
Like
Save
Share
Report

In this article, we will see how to use the transition effect on the page using jQuery, along with knowing the 2 different methods for implementing the transition effect on the page. Transitions allow us to control the way in which transition takes place between the two states of the element. Its main purpose is to animate the changes and make the changes visually appealing to the user and hence, giving a better user experience and interactivity. The basic need to implement the transition effect to the page is to include the CSS Transition Shorthand Property that allows combining all four available transition properties, into one single shorthand property, along with using the jQuery css() method that is used to change the style property of the selected element. The basic way for writing the syntax for adding the transition effect in jQuery:

$(document).ready(function(){
 $("#example").on("click", function(){
   $(this).css("transition", "all 0.5s ease");
 });
});

Although, there is another way to implement the transition effect on the page by using barba.js. Barba.js is a small, minified, compressed, and easy-to-use library which helps to create smooth & fluid transitions between the different pages of the website, along with making the website run like SPA (Single Page Application) that helps to reduce the delay between the pages, & minimize browser HTTP requests. For this, the overall user’s web experience will be enhanced.

In the first method, basically, we will see how can we swap the text with an image & again swap with the 2nd text which makes the transition effect between the text & the image. In the second method, we will see how to make the transition effect on rendering the character smoothly while hovering the button for changing their colors. We will explore all those methods for including the transition effects on the page & will illustrate their implementation with examples.

Approach 1: Transition by displaying the GFG image on the screen

In this method, we have added text with the GFG image to create the transition between the two multiple pages so that when we change the pages, so, the image will be in transition on the same page for some seconds as a transition effect. For this, we will create an index.html file & for adding the styling, we have a CSS file, along with containing the code for our transition effect loader in jQuery. In the index.html file, we have created a simple div tag that contains the id & class as the loader. Inside the <div> tag, we have added a <img> tag, containing an image. We have created 2 <div> tag that contains the id & class as page1 & page 2, which contains an onclick() function for both gfg headings & added the transition button. In the styling, we have added some styling for the loader & image. In the js file, basically we define all id and functions and provide the id by defining three variables, i.e., page 1, page 2, and loader, and for the same method, we use for second function and define time for loader showing when we click on transition so one gif will show and after showing gif for some second again second will show on the same screen. When a second-page show so the first page should not be shown. For this, we have defined the display block for page 1 and declared all methods for showing the transition effect on two pages. 

Example 1: This example illustrates the basic use of the transition effects on the page.

HTML




<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta name="viewport"
          content="width=device-width,
                   initial-scale=1.0">
    <title>
        Transition Effects in the page
    </title>
    <script src="main.js"></script>
</head>
<style>
    .loader {
        position: absolute;
        width: 100%;
        height: 100vh;
        z-index: 99;
        left: -100%;
        transition: .1s;
    }
     
    img {
        position: absolute;
        left: 15%;
        top: -2%;
        width: 22%;
        height: 30%;
    }
     
    .page1 {
        position: absolute;
        width: 100%;
        height: 100vh;
    }
     
    .page2 {
        position: absolute;
        width: 100%;
        height: 100vh;
        display: none;
    }
     
    h4 {
        margin-left: 15%;
        font-size: 20px;
        color: green;
    }
     
    a {
        margin-left: 8%;
        font-size: 15px;
        color: black;
        cursor: pointer;
    }
     
    a:hover {
        color: brown;
    }
</style>
 
<body>
    <div class="loader" id="loader">
        <img src=
             alt="gfg_Logo">
    </div>
    <div class="page1"
         id="page1">
        <h4>
            Welcome To GeeksforGeeks 1st
            <br><br>
            <a onclick="appearP2()">
                Transition
            </a>
        </h4>
    </div>
    <div class="page2"
         id="page2">
        <h4>
            Welcome To GeeksforGeeks 2nd
            <br><br>
            <a onclick="appearP1()">
                Transition
            </a>
        </h4>
    </div>
</body>
 
</html>


  • main.js

Javascript




function appearP2() {
 
    //code for loader and both pages
    var loader = document.getElementById('loader');
    var page1 = document.getElementById('page1');
    var page2 = document.getElementById('page2');
    loader.style.left = "0";
 
    // timeout method which will display our
    // next page and block first page
    setTimeout(function () {
        loader.style.left = "-100%";
        page1.style.display = "none";
        page2.style.display = 'block';
 
        // set time 2000 like 2000 time we can show transition
    }, 2000)
}
 
function appearP1() {
    var loader = document.getElementById('loader');
    var page1 = document.getElementById('page1');
    var page2 = document.getElementById('page2');
    loader.style.left = "0";
 
    setTimeout(function () {
        loader.style.left = "-100%";
        page1.style.display = "block";
        page2.style.display = 'none';
    }, 2000)
}


Output:

GFG Image is showing during the page transition

Approach 2: Transition effect by using Barba.js

First, create a folder that will contain an HTML file, and a js file, along with adding the image. Here, we will use barba.js for showing the transition on-page. In this transition, we will fade up the word that will look like the word appears from bottom to top. We will add a transition effect on the button by using CSS and jQuery. Here, we will be using the different classes & attributes provided by the barba.js. In the HTML file, first, we create a title and heading in the h1 tag, along with adding one button and adding the same page by using a tag. After this, we will write some CSS for showing the transition on the button, such as we will add a hover effect when we click so the button color will change smoothly from white to black, etc. At last, we will add a <script> tag for barba js & will include the required CDN links in it. Create the main.js file & in this file, we create function & define the time for transition animate time opacity and all main functionality. Here, w using barab.js code for showing transition on word on display screen and after that we create again function in which we use content animation sync method for showing transition. We define once like when we click on button so it will show bottom to top transition effect on once time when we refresh page by click on transition button.

Example 2: This example describes the basic creation & usage of the transition effects in the page by using the Barba.js

HTML




<!DOCTYPE html>
<html>
 
<head>
    <meta name="viewport"
          content="width=device-width,
                   initial-scale=1.0">
    <title>
        Page Transition Using BarbaJS & GSAP
    </title>
    <script src=
    </script>
    <script src=
    </script>
    <script src=
    </script>
    <script src="main.js"></script>
</head>
<style>
    body {
        color: green;
    }
     
    h1 {
        position: absolute;
        left: 5%;
        font-size: 30px;
    }
     
    .button {
        position: absolute;
        top: 10%;
        left: 8%;
    }
     
    .button a {
        text-decoration: none;
        color: black;
        border: 1px solid black;
        padding: 5px 20px;
        text-transform: uppercase;
        font-size: 10px;
    }
     
    .button:hover a {
        background: black;
        color: white;
    }
</style>
 
<body data-barba="wrapper">
    <main data-barba="container"
          data-barba-namespace="home-section">
        <div class="header">
            <h1 class="title animate-this">
                GeeksforGeeks
            </h1>
            <div class="animate-this button">
                <a href="Index.html">Transition</a>
            </div>
        </div>
    </main>
</body>
 
</html>


  • main.js 

Javascript




function contentAnimation() {
    var tl = gsap.timeline();
    tl.from(".animate-this",
            { duration: 1,
              y: 30,
              opacity: 0,
              stagger: 0.4,
              delay: 0.5 });
}
 
$(function () {
    barba.init({
        sync: true,
 
        transitions: [
            {
                async leave(data) {
                    const done = this.async();
                },
                async enter(data) {
                    contentAnimation();
                },
                async once(data) {
                    contentAnimation();
                },
            },
        ],
    });
});


Output:

GFG text is a hover transition when we click on the button



Last Updated : 02 Feb, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads