<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.4.0/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.4.0/MotionPathPlugin.min.js"></script>

</head>
<style>
.header{
 height:25vh;
 background-color:red;
}

.text{
text-align:center;
color:white;
font-size:20;
}

body{
background-color:black;
}

.headtext{
color:yellow;
text-align:center

}

#circle{
 width:100px;
 height:100px;
 background-color:#80ced6;
  border-radius: 50%;

}

.circletext{

font-size:50;
text-align:center;
}
</style>
<body>

<div class="header">
<div class="headtext">
<h1>A bounce Header!</h1></div>
</div>
<div id="circle">
<div class="circletext"><h2>C</h2></div>
</div>

<div class="content"></div>
<div class="text">
<h1> heck Out This Cool Feature!</h1>
</div>

<script>
gsap.from('.header',{duration:2,y:'-100%',ease:'bounce'})

gsap.from('.text',{duration:1.5,opacity:0,delay:2,stagger:.5})

gsap.to("#circle",{duration:5,motionPath: [{x:100, y:90}, {x:150, y:10}, {x:200, y:100}],transformOrigin: "50% 50%",
    duration: 5,
    ease: "bounce"});

</script>

</body>
</html>