Page-Transition-Animation-Using-html-css-and-gsap

Page Transition Animation Using GSAP | HTML, CSS And GSAP

"Page transition Animation" are used in a lots of web application. This "page transition Animation" is designed by Using HTML CSS and gsap.

We have already created a lot of animation using the gsap. We have also created a dedicated playlist of gsap animation. You must visit that playlist.

In this transition animation, we will move from one webpage to new webpage. This Animation and redirection is created using jQuery and GSAP. We have two html files 'index.html' and 'profile.html'. we will move from 'index.html' to 'profile.html'.

01. index.html

<!DOCTYPE html>
<html>
<head>
 <title>Page Transition Animation Using GSAP | Rustcode</title>
 <link rel="stylesheet" href="style.css">
</head>
<body>

<div class="transition-container">
  <div class="strip"></div>
  <div class="strip"></div>
  <div class="strip"></div>
  <div class="strip"></div>
  <div class="strip"></div>
</div>

<div class="content">
  <a href="#" id="profile-btn">PROFILE</a>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.6.1/gsap.min.js"></script>
<script src="script.js"></script>
</body>
</html>

02. CSS(index.html)

This is index file css

  @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@500;600;700');

body{
  padding: 0px;
  margin: 0px;
  overflow: hidden;
  background: #E1E1E1;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
}

#profile-btn{
  padding: 20px 40px;
  text-decoration: none;
  background: #8E2DE2;
  color: white;
  font-family: "Poppins", sans-serif;
  box-shadow: rgba(0, 0, 0, 0.2) 0px 20px 30px 0px;
}

.transition-container{
  position: absolute;
  top: 0px;
  left: 0px;
  height: 100vh;
  display: flex;
  flex-direction: row;
  background: #8E2DE2;
  background: linear-gradient(to right, #4A00E0, #8E2DE2);
  width: 100%;
  visibility: hidden;
}

.transition-container > .strip{
  width: 20%;
  background: #FFA952;
}

03. profile.html

We write html css and gsap code in this file we also inclde gsap file in this file. Download profile image form github link.

<!DOCTYPE html>
<html>
<head>
 <title>Page Transition Animation Using GSAP | Rustcode</title>
 <link rel="stylesheet" href="style.css">
 <style>
  img{
    width: 350px;
    box-shadow: rgba(0, 0, 0, 0.2) 0px 20px 30px 0px;
    border-radius: 4px;
  }
 </style>
</head>
<body>

<div class="content">
  <img src="dp.jpg">
</div>


<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.6.1/gsap.min.js"></script>
<script type="text/javascript">
  gsap.from("img", 1.4, {
    autoAlpha: 0,
    y: 200,
    delay: 0.2,
    ease: Power4.easeInOut
  });
</script>
</body>
</html>

04. GSAP SCRIPT

Script for animation and new page redirect code.

function transitionFunction(){

const transitionContainer = document.querySelector(".transition-container");
const strips = document.querySelector(".strip");

gsap.set(".content", {visibility: "hidden"});

const transition1 = gsap.from(transitionContainer, 2.2, {
    y: "100%",
    autoAlpha: 0,
    delay: 0,
    paused: true,
    ease: Power4.easeInOut
});

const transition2 = gsap.to(transitionContainer, 1.2, {
    y: "-100%",
    delay: 3.5,
    paused: true,
    ease: Power4.easeInOut,
    onComplete: TweenLite.delayedCall(4.5, newPage)
});

const strip = gsap.from(".strip", 2.2, {
    y: "200",
    autoAlpha: 0,
    delay: 1.2,
    stagger: 0.2,
    paused: true,
    ease: Power4.easeInOut
});

transition1.play();
strip.play();
transition2.play();

}

$(".content").find("a").click(transitionFunction);


function newPage(){
    window.location.href = "profile.html";
}

Archive