Animating Bootstrap Carousels with the GSAP Animation Library (by George Martsoukos)

In a previous post, I covered the process of converting a Bootstrap carousel into a full screen carousel with a random initial image. Today, I’ll build on that and show you how to use GSAP (GreenSock Animation Platform), a popular JavaScript library, for animating Bootstrap carousels.

Before going any further, let’s look at what we’ll be building. There’s also a demo at the end of the article.

Note: We’ll use Bootstrap 3 styles to create the carousel. However, there’s also a second version of it available which is compatible with Bootstrap 4 alpha release (latest release at the time of this writing).

Building the Carousel

Be sure to include Bootstrap and jQuery (Bootstrap’s JavaScript components require it) in your page, for example, from a CDN:

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Using GSAP to Animate Bootstrap 3 Carousels</title>
    <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  </head>
  <body>
    ...
    https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js
    https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js
  </body>
</html>

Note that Bootstrap’s JavaScript requires jQuery version 1.9.1 or higher, but lower than version 3.

The basic structure of our carousel looks like this:

As you can see, it contains two slides. The first slide has a class of first and an id of 1, while the second one has a class of second and an id of 2.

Regarding their styles:

  • We set their height equal to the viewport height and
  • give them different background colors.

The associated CSS rules:

.item {
  height: 100vh;
}

.first {
  background: #D98F4F; /*orange*/
}

.second {
  background: #2c9cae; /*lightblue*/
}

This should be enough to give us a working carousel.

Building the First Slide

Next, we take advantage of Bootstrap’s helper classes (e.g. grid classes) to set up the contents for our slides.

The markup for the first slide is the following:

If you’re following along, be sure to replace IMG_PATH with something sensible. You can grab the URLs for the images from the final demo.

Here’s its visualization:

Building the Second Slide

In the same way, here’s the markup for the second slide:

Continue reading %Animating Bootstrap Carousels with the GSAP Animation Library%

Bir Cevap Yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

TOP