Hello guy’s in this tutorial we will create GSAP Animated Carousel Slider using HTML CSS & JavaScript
What is GSAP?
Think of GSAP as the Swiss Army Knife of javascript animation…but better. It animates anything JavaScript can touch (CSS properties, canvas library objects, SVG, React, Vue, generic objects, whatever) and it solves countless browser inconsistencies, all with blazing speed (up to 20x faster than jQuery), including automatic GPU-acceleration of transforms. See the “Why GSAP?” article for details. Most other libraries only animate CSS properties. Plus, their sequencing abilities and runtime controls pale by comparison.
Common query
- How to create a carousel
- How to create a carousel slider
- How to use GSAP
- How to use GSAP – GreenSock
- How to create an animated Carousel
We will try to solve above mention query. and also we will learn how to use the GSAP library and how to create an animated carousel using GSAP with mouse move animation.
First, we need to create three files index.html and style.css then we need to do code for it.
Step:1
Add below code inside index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>GSAP Mouse Move Animation</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta https-equiv="X-UA-Compatible" content="ie=edge" />
<link rel="stylesheet" href="style.css" />
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;700&display=swap" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.0/TweenMax.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.0/plugins/ScrollToPlugin.min.js"></script>
</head>
<body>
<div class="loading_wrapper">
<div class="loading-inner-content">
<div class="box box-1">
<div class="box-content">
<img src="img/kathy.jpg" alt="">
</div>
</div>
<div class="box box-2">
<div class="box-content">
<img src="img/kathy.jpg" alt="">
</div>
</div>
<div class="box box-3">
<div class="box-content">
<img src="img/kathy.jpg" alt="">
</div>
</div>
<div class="box box-4">
<div class="box-content">
<img src="img/kathy.jpg" alt="">
</div>
</div>
<div class="box box-5">
<div class="box-content">
<img src="img/kathy.jpg" alt="">
</div>
</div>
<div class="box box-6">
<div class="box-content">
<img src="img/kathy.jpg" alt="">
</div>
</div>
<div class="box box-7">
<div class="box-content">
<img src="img/kathy.jpg" alt="">
</div>
</div>
<div class="box box-8">
<div class="box-content">
<img src="img/kathy.jpg" alt="">
</div>
</div>
<div class="box box-9">
<div class="box-content">
<img src="img/kathy.jpg" alt="">
</div>
</div>
<div class="box box-10">
<div class="box-content">
<img src="img/kathy.jpg" alt="">
</div>
</div>
</div>
</div>
<script>
$(window).on("load", function(){
var $loadingWrapper = $(".loading_wrapper"),
$loadingInnerContent = $(".loading-inner-content");
$loadingInnerContent.on("mousemove touchmove", function(e){
if(e.clientX > $loadingWrapper.width() / 2) {
TweenMax.to($loadingWrapper, 2, {
scrollTo: {
x: "+=175"
},
ease: Power2.easeOut
});
}else {
TweenMax.to($loadingWrapper, 2, {
scrollTo: {
x: "-=175"
},
ease: Power2.easeOut
})
}
})
})
</script>
</body>
</html>
Step:2
Then we need to add code for style.css which code I provide in the below screen.
* {
padding: 0;
margin: 0;
font-family: 'Montserrat', sans-serif;
}
body {
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background: #000;
}
.loading_wrapper {
width: 100%;
height: 280px;
position: relative;
overflow: hidden;
cursor: pointer;
}
.loading-inner-content {
background: #fff;
height: 280px;
width: 2620px; /* items X image-size( 240px + space of margin ) */
}
.box {
position: relative;
width: 240px; /* image-size */
height: 240px;
margin: 20px 20px 0 0;
float: left;
overflow: hidden;
}
.box:first-child {
margin-left: 20px;
}
.box:last-child {
margin-right: 20px;
}
.box-content {
position: absolute;
top: 0;
left: 0;
z-index: 999;
}
.box-content > img {
width: 100%;
}