DEV Community

loading...
Cover image for GSAP Animated Carousel Slider

GSAP Animated Carousel Slider

stackfindover profile image Stackfindover ・3 min read

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

  1. How to create a carousel
  2. How to create a carousel slider
  3. How to use GSAP
  4. How to use GSAP – GreenSock
  5. 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 http-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>
Enter fullscreen mode Exit fullscreen mode

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%;
}
Enter fullscreen mode Exit fullscreen mode

Animated Carousel Slider Video Output:

Animated Carousel Slider Codepen Output:

Discussion (0)

pic
Editor guide