<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 ---------->
<div class="mainslider-wrap">
<div class="container">
<div class="arrows">
<svg xmlns="http://www.w3.org/2000/svg" width="73.001" height="26" viewBox="0 0 73.001 26">
<g id="Arrows" transform="translate(-1246 -595)">
<g id="Left" transform="translate(1244.001 592)">
<rect id="bg" width="28" height="26" transform="translate(1.999 3)" fill="#fff" opacity="0"/>
<path id="Path_4" data-name="Path 4" d="M29.018,17H2.982a.984.984,0,0,1-.908-.617,1.013,1.013,0,0,1,.213-1.09l11.789-12a.969.969,0,0,1,1.389,0,1.012,1.012,0,0,1,0,1.414L5.354,15H29.017a1,1,0,0,1,0,2Z"/>
<path id="Path_5" data-name="Path 5" d="M14.772,29a.974.974,0,0,1-.695-.293l-7.86-8a1.012,1.012,0,0,1,0-1.414.969.969,0,0,1,1.389,0l7.86,8a1.012,1.012,0,0,1,0,1.414A.97.97,0,0,1,14.772,29Z"/>
</g>
<g id="Right" transform="translate(1319.001 621) rotate(180)">
<rect id="bg-2" data-name="bg" width="28" height="26" transform="translate(28.001 26) rotate(-180)" fill="#fff" opacity="0"/>
<path id="Path_4-2" data-name="Path 4" d="M27.019,14H.983a.984.984,0,0,1-.908-.617,1.013,1.013,0,0,1,.213-1.09l11.789-12a.969.969,0,0,1,1.389,0,1.012,1.012,0,0,1,0,1.414L3.355,12H27.018a1,1,0,0,1,0,2Z" transform="translate(0 0)"/>
<path id="Path_5-2" data-name="Path 5" d="M8.843,10a.974.974,0,0,1-.695-.293l-7.86-8a1.012,1.012,0,0,1,0-1.414.969.969,0,0,1,1.389,0l7.86,8a1.012,1.012,0,0,1,0,1.414A.97.97,0,0,1,8.843,10Z" transform="translate(3.93 16)"/>
</g>
<rect id="Middel_Line" width="14" height="2" rx="1" transform="translate(1275.75 607)"/>
</g>
</svg>
</div>
<div class="slide slide1">
<div class="content">
<h1>Hello World</h1>
</div>
<div class="img"></div>
</div>
<div class="slide slide2">
<div class="content">
<h1>Nice Day!</h1>
</div>
<div class="img"></div>
</div>
<div class="slide slide3">
<div class="content">
<h1>Bay!!!</h1>
</div>
<div class="img"></div>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.8.0/gsap.min.js" integrity="sha512-eP6ippJojIKXKO8EPLtsUMS+/sAGHGo1UN/38swqZa1ypfcD4I0V/ac5G3VzaHfDaklFmQLEs51lhkkVaqg60Q==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script>
const cont = document.querySelector('.container');
const left = document.querySelector('#Left');
const right = document.querySelector('#Right');
const svg = document.querySelector('.arrows svg');
const slide1 = document.querySelector('.slide1');
const slide2 = document.querySelector('.slide2');
const slide3 = document.querySelector('.slide3');
const tl = gsap.timeline({ paused: true, defaults: { ease: Power3.easeInOut } });
window.addEventListener('load', () => {
cont.style.visibility = 'visible';
tl
.to(slide1, { clipPath: 'polygon(7% 7%, 93% 7%, 93% 93%, 7% 93%)' })
.to(slide1, { clipPath: 'polygon(93% 7%, 93% 7%, 93% 93%, 93% 93%)' }, '+=1')
.to(slide2, { clipPath: 'polygon(0 0, 100% 0, 100% 100%, 0% 100%)', zIndex: 1 }, '+=1')
.addPause()
.to(slide2, { clipPath: 'polygon(7% 7%, 93% 7%, 93% 93%, 7% 93%)' }, '+=1')
.to(slide2, { clipPath: 'polygon(93% 7%, 93% 7%, 93% 93%, 93% 93%)', zIndex: -1 }, '+=1.5')
.to(slide3, { clipPath: 'polygon(0 0, 100% 0, 100% 100%, 0% 100%)', zIndex: 1 }, '+=1')
.addPause()
left.addEventListener('click', () => {
tl.reverse()
});
right.addEventListener('click', () => {
tl.play()
});
})
</script>
@import url(https://fonts.googleapis.com/css?family=Playfair+Display:regular,500,600,700,800,900,italic,500italic,600italic,700italic,800italic,900italic);
*,
*::before,
*::after {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Playfair Display", sans-serif;
}
.mainslider-wrap {
height: 100vh;
}
.container {
visibility: hidden;
}
.container .arrows {
position: absolute;
z-index: 10;
bottom: 4rem;
right: 7rem;
}
.container .arrows svg {
transform: scale(1.25);
fill: #fff;
}
.container .arrows svg #Arrows g {
cursor: pointer;
}
.container .slide {
height: 100vh;
width: 100%;
position: absolute;
transition: clip-path 1s;
}
.container .slide .img {
height: 100vh;
background-size: cover;
background-position: bottom;
}
.container .slide .content {
width: 100%;
height: 100vh;
position: absolute;
display: grid;
place-items: center;
z-index: 1;
}
.container .slide .content h1 {
font-size: 4rem;
position: absolute;
}
.container .slide1 {
clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
z-index: 1;
}
.container .slide1 .img {
background-image: url("https://cdn.pixabay.com/photo/2021/11/08/23/29/nature-6780354_960_720.jpg");
}
.container .slide2 {
z-index: -1;
clip-path: polygon(7% 7%, 93% 7%, 93% 93%, 7% 93%);
}
.container .slide2 .img {
background-image: url("https://cdn.pixabay.com/photo/2021/09/15/06/29/pot-marigold-6625895_960_720.jpg");
}
.container .slide2 .content h1 {
color: #fff;
}
.container .slide3 {
z-index: -2;
clip-path: polygon(7% 7%, 93% 7%, 93% 93%, 7% 93%);
}
.container .slide3 .img {
background-image: url("https://cdn.pixabay.com/photo/2021/11/15/04/15/china-6796350_960_720.jpg");
}
.container .slide3 .content h1 {
color: #fff;
}
