<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<div id="box1">
<div id="page"></div>
</div>
<div id="box2">
<div id="page"></div>
</div>
<div id="box3">
<div id="page"></div>
</div>
<script src="minified/gsap.min.js"></script>
<script src="minified/ScrollTrigger.min.js"></script>
<script src="script.js"></script>
</body>
</html>
*{
margin: 0px;
padding:0px;
box-sizing: border-box;
font-family: gilroy;
}
html,
body{
height: 100%;
width: 100%;
}
#box1{
width: 100%;
height: 100%;
background:#ddd;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 15px;
}
#box2{
width: 100%;
height: 100%;
background:#ddd;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 15px;
}
#box3{
width: 100%;
height: 100%;
background:#ddd;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 15px;
}
#page{
width: 100px;
height: 100px;
background: #000000;
}
gsap.from("#box1 #page",{
scale:0,
delay:1,
duration:1,
rotate:360,
opacity:0,
})
gsap.from("#box2 #page",{
scale:0,
duration:1,
rotate:360,
opacity:0,
scrollTrigger:{
trigger:"#box2 #page",
scroller:"body",
markers:false,
start:"top 30%",
end: "+=200",
pin: true,
scrub: 0.5
}
})
