<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 ---------->
<body>
<div id="text" class="text0">Around The World</div>
<div id="text" class="text1">Around The World</div>
<div id="text" class="text2">Around The World</div>
<div id="text" class="text3">Around The World</div>
<div id="dummy">
<div id="back">BACK TO TOP</div>
</div>
<body>
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@900&display=swap');
body{
font-family: 'Montserrat', sans-serif;
background:ivory;
width:100%;
height:100%;
padding:0;
margin:0;
overflow-x:hidden;
}
#text{
text-align:center;
position:relative;
top:200px;
font-size:7em;
}
.text0,.text2{
color: black;
-webkit-text-fill-color: white; /* Will override color (regardless of order) */
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: black;
}
.text1,.text3{
color: black;
-webkit-text-fill-color: #bc0000; /* Will override color (regardless of order) */
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: black;
}
#dummy{
position:relative;
height:100vh;
width:100%;
}
#back{
position:relative;
padding-top:50%;
text-align:center;
font-size:1.5em;
cursor:pointer;
}
@media only screen and (max-width: 600px) {
#back{
cursor:none;
font-size:0.8em;
}
#text{
top:70px;
font-size:2.25em;
}
}
gsap.to('.text0',{
x:'20%',rotate:10,duration:0.85,scrollTrigger:{
trigger:'.text0',
scrub:true,
start:'top 20%'
}
})
gsap.to('.text2',{
x:'20%',rotate:10,duration:0.85,scrollTrigger:{
trigger:'.text2',
scrub:true,
start:'top 40%'
}
})
gsap.to('.text1',{
x:'-20%',rotate:-10,duration:0.85,scrollTrigger:{
trigger:'.text1',
scrub:true,
start:'top 30%'
}
})
gsap.to('.text3',{
x:'-20%',rotate:-10,duration:0.85,scrollTrigger:{
trigger:'.text3',
scrub:true,
start:'top 40%'
}
})
document.querySelector('#back').addEventListener('click',()=>{
gsap.to(window, {duration: 1, scrollTo:'body'});
})
