Mastering Carousels with GSAP: From Fundamentals to Superior Animation

Carousels are a reasonably widespread UI sample (there are lots of wonderful carousel and slider examples obtainable on Codrops). Whereas carousel designs differ relying on the use case, the next demos discover how the GreenSock Animation Platform (GSAP) can be utilized to realize seamless looping, clean animations, and in the end, a greater consumer expertise.

This text is for frontend designers and builders involved in enhancing the performance and visible enchantment of a typical horizontal carousel. Familiarity with JavaScript and fundamental GSAP strategies can be useful, however anybody on the lookout for inspiration and sensible examples might discover the next content material helpful.

What You’ll Be taught

• Primary carousel implementation utilizing HTML and CSS
• Methods to use gsap.utils.wrap() and horizontalLoop()
• Superior animation methods, together with picture parallax and function-based values

Our Primary Carousel

Let’s begin with a horizontally scrolling carousel utilizing solely HTML and CSS:

<div class="carousel">
    
    <div class="carousel-slide">
      <img src="https://pictures.unsplash.com/photo-1659733582156-d2a11801e59f?q=50&w=1600">
      <h2>We're No</h2>
      <h5>Strangers to like</h5>
    </div>
        
    ...

</div>

.carousel {
  width: 100vw;
  peak: 80vh;
  hole: 10px;
  overflow-x: auto;
  scroll-snap-type: x obligatory;
  show: flex;
  -webkit-overflow-scrolling: contact;
}

.carousel-slide {
  place: relative;
  flex: 0 0 50%;
  show: flex;
  flex-direction: column;
  justify-content: middle;
  align-items: middle;
  colour: white;
  scroll-snap-align: middle;
  overflow: hidden;
}

.carousel-slide img {
  place: absolute;
  width: 100%;
  peak: 100%;
  object-fit: cowl;
}

h2 {
  place: relative;
  margin: 0;
  font-size: 1.8rem;
}

h5 {
  place: relative;
  margin: 2% 0 0 0;
  font-size: 1rem;
  font-weight: 100;
  letter-spacing: 0.3px;
}

/* Simplify the scroll bar look */
::-webkit-scrollbar {
  peak: 13px;
}

::-webkit-scrollbar-track {
  background: clear;
}

::-webkit-scrollbar-thumb {
  border-top: 6px stable #000;
  background: #555;
  width: 50%;
}

::-webkit-scrollbar-thumb:hover {
  background: #bbb;
}

@media (max-width: 500px) {
  .carousel-slide {
    flex: 0 0 80%;
  }

  ::-webkit-scrollbar-thumb {
    width: 80%;
  }
}

Right here’s the end result:

It makes use of scroll snapping and a few customized styling on the scrollbar. Nothing fancy, however it works even when JavaScript is disabled.

Word that the HTML above is deliberately concise. Nonetheless, in manufacturing, it’s essential to observe accessibility greatest practices, together with utilizing alt textual content on pictures and descriptive ARIA attributes for display screen reader customers.

Constructing on the Basis – GSAP Demo 1A

To see how GSAP can improve a carousel, we’ll discover two completely different approaches—the primary utilizing gsap.utils.wrap(). Wrap is considered one of a number of useful utility strategies included in gsap.js—no plugin required! Given a min/max vary, it returns a price inside that vary:

 gsap.utils.wrap(5, 10, 12); // min 5, max 10, worth to wrap 12: returns 7

The instance above returns 7 as a result of 12 is 2 greater than the utmost of 10, so it wraps round to the beginning and strikes 2 steps ahead from there. In a carousel, this can be utilized to loop infinitely by way of the slides.

Right here’s a easy demo of how it may be utilized:

Within the HTML, a <nav> block has been added that accommodates earlier/subsequent buttons and progress textual content:

<nav class="carousel-nav">
  <button class="prev" tabindex="0" aria-label="Earlier Slide"></button>
  <button class="subsequent" tabindex="0" aria-label="Subsequent Slide"></button>
  <div>1/8</div>
</nav>

A number of new guidelines have been added to the CSS, most significantly to .carousel-slide-abs:

.carousel-slide-abs {
  place: absolute;
  left: 50%;
  prime: 50%;
  remodel: translate(-50%, -50%);
  width: 75vw;
  peak: 70vh;
}

Within the JS, we override the carousel’s scroll-snap-type and show the <nav> block. Since we not have a scrollable space, the buttons are mandatory to take care of keyboard accessibility. Safari requires tabindex="0" to permit customers to tab to them. Moreover, aria-labels are essential for the reason that buttons haven’t any seen textual content content material.

We apply the brand new class to every slide, which successfully stacks all of them within the middle. We additionally set the preliminary opacity: 1 for the primary slide and 0 for the remainder:

gsap.set(".carousel", { "scroll-snap-type": "none" });

gsap.set(".carousel-nav", { show: "block" });

slides.forEach((slide, i) => {
  slide.classList.add("carousel-slide-abs");
  gsap.set(slide, { opacity: (i === 0 ? 1 : 0) });
});

Subsequent, we’d like a operate that transitions to the earlier or subsequent slide. changeSlide() is handed a course parameter of both optimistic or damaging 1. Inside this operate, we:

1. Fade out the present slide
2. Replace the present slide index utilizing gsap.utils.wrap()
3. Fade within the new present slide
4. Replace the progress textual content

The completely different easing on the outro and intro tweens helps forestall extreme overlapping opacity throughout the crossfade.

subsequent.addEventListener("click on", () => changeSlide( 1 ));
prev.addEventListener("click on", () => changeSlide( -1 ));

operate changeSlide( dir ) {
  
  gsap.to(slides[currentIndex], { opacity: 0, ease: "power3" });
  
  currentIndex = gsap.utils.wrap(0, slides.size, (currentIndex += dir));
  
  gsap.to(slides[currentIndex], { opacity: 1, ease: "power3.inOut" });
  
  gsap.set(".carousel-nav div", { innerText: `${currentIndex + 1}/${slides.size}` });

}

Sprucing the Transition – GSAP Demo 1B

To take this concept additional, let’s add extra element to the outro and intro animations:

For the 3D perspective to work, we’ve added perspective: 750px to .carousel-slide-abs within the CSS.

As an alternative of concentrating on the slides themselves, we set the opacity of their baby parts to 0—apart from these within the first slide.

 gsap.set(slide.youngsters, { opacity: (i === 0 ? 1 : 0) });

Then, we do the next inside changeSlide():

1. Retailer a reference to the outgoing slide’s youngsters
2. Replace currentIndex, simply as earlier than
3. Create a const for the incoming slide’s youngsters
4. Kill tweens on each slides’ youngsters to forestall conflicts if slides change quickly
5. Create a timeline for the transition:

gsap.timeline({ defaults:{ ease: "expo" } })
  // replace progress textual content
  .set(".carousel-nav div", { innerText: `${currentIndex + 1}/${slides.size}` })

  // previous slide outro
  .to(oldLayers[0], {
    length: 0.3,
    rotateY: (dir<0 ? -75 : 75),
    scale: 0.6,
    ease: "power2.in"
  }, 0)
  .to(oldLayers, {
    length: 0.3,
    opacity: 0,
    ease: "power2.in"
  }, 0)

  // new slide intro
  .to(newLayers, {
    opacity: 1,
    ease: "power1.inOut",
    stagger: 0.2
  }, 0.2)
  .fromTo(newLayers[0], {
    rotateY: (dir<0 ? 90 : -90),
    scale: 0.6
  },{
    rotateY: 0,
    scale: 1
  }, 0.3)
  .fromTo([newLayers[1], newLayers[2]], {
    y: 35
  },{
    length: 1,
    y: 0,
    stagger: 0.14
  }, 0.4);

Easing and staggers assist clean out and house the motion. The dir parameter modifies the rotationY, including a subtly distinctive movement to earlier and subsequent actions.

This fundamental setup will be simply custom-made additional. Animating a clip-path, making use of a blur filter, or experimenting with extra 3D transforms may all produce attention-grabbing outcomes.

A Totally different Method – GSAP Demo 2A

One other technique to create a seamless looping carousel with GSAP is to make use of the horizontalLoop() helper operate. Though GSAP helper capabilities aren’t formally a part of the core library, they’re a useful assortment of code snippets and shortcuts. In addition they function nice studying sources for writing extra superior GSAP code.

This particular helper operate animates parts alongside their x-axis and repositions them as soon as they’re out of view to create an infinite loop. Right here’s a fundamental implementation:

Once more, we override the CSS and show the <nav> component. Then we name horizontalLoop(), which takes two parameters: an array of the carousel slides and a config object for setting varied choices.

const loop = horizontalLoop(slides, {
  paused: true,       // no auto-scroll
  paddingRight: 10,   // match the 10px flex hole
  middle: true,       // snap the energetic slide to the middle
  onChange: (slide, index) => { // known as when the energetic slide adjustments
    if (activeSlide) {
      gsap.to(".energetic", { opacity: 0.3 });
      activeSlide.classList.take away("energetic");
    }
    slide.classList.add("energetic");
    activeSlide = slide;
    gsap.to(".energetic", { opacity: 1, ease: "power2.inOut" });
    gsap.set(".carousel-nav div", { innerText: `${index + 1}/${slides.size}` });
  }
});

Essentially the most notable of those choices is the onChange callback, the place we are able to write code that executes every time the energetic slide adjustments. On this instance, we’re eradicating and including the “energetic” class title and tweening the opacity to attract extra focus to the middle slide.

The helper operate returns a timeline with a number of helpful added strategies, together with subsequent(), earlier(), and toIndex(). We’ll use these so as to add navigation performance to our earlier/subsequent buttons, in addition to to the person slides:

subsequent.addEventListener("click on", () => loop.subsequent({ length: 1, ease: "expo" }));
prev.addEventListener("click on", () => loop.earlier({ length: 1, ease: "expo" }));

// every slide can operate as a button to activate itself
slides.forEach((slide, i) => {
  slide.addEventListener("click on", () => loop.toIndex(i, {length: 1, ease: "expo"}))
});

Lastly, we set the preliminary carousel state by adjusting the opacity of every slide and calling toIndex() with no tween length, which facilities the energetic slide.

gsap.set(".carousel-slide", { opacity: (i) => (i === 0 ? 1 : 0.3) });

loop.toIndex(0, { length: 0 }); 

In case you’re unfamiliar with function-based values in GSAP, that is an wonderful characteristic—positively try that hyperlink to learn the way they work. Right here, we’re iterating by way of every component with the category title “carousel-slide,” returning an opacity worth of 1 for the primary slide and 0.3 for the remainder.

The rest of the JS is simply the helper operate, copied and pasted from the GSAP docs demo. Usually, you received’t want to switch something inside it. (We’ll take a look at an exception in Demo 2C.)

Add Draggable & InertiaPlugin – GSAP Demo 2B

To make the carousel transfer on drag, we’ll want two plugins: Draggable and the Inertia Plugin. As soon as these scripts are included, you may set draggable: true within the config object.

Along with drag conduct, this iteration contains some textual content animation, with logic to forestall it from working on the primary load (plus hover in/out animations on the nav buttons).

onChange: (slide, index) => { // known as when the energetic slide adjustments
  if (activeSlide) {
    gsap.to(".carousel h2, .carousel h5", { overwrite: true, opacity: 0, ease: "power3" });
    gsap.to(".energetic", { opacity: 0.3 });
    activeSlide.classList.take away("energetic");
  }
  slide.classList.add("energetic");
  activeSlide = slide;
  
  // intro animation for brand new energetic slide
  gsap.timeline({ defaults:{ ease:"power1.inOut" } })

    // fade within the new energetic slide
    .to(".energetic", { opacity: 1, ease: "power2.inOut" }, 0)

    // fade out the progress textual content, change its worth, fade it again in
    .to(".carousel-nav div", { length: 0.2, opacity: 0, ease: "power1.in" }, 0)
    .set(".carousel-nav div", { innerText: `${index + 1}/${slides.size}` }, 0.2)
    .to(".carousel-nav div", { length: 0.4, opacity: 0.5, ease: "power1.inOut" }, 0.2)

    // fade within the textual content parts and translate them vertically
    .to(".energetic h2, .energetic h5", { opacity: 1, ease: "power1.inOut" }, 0.3)
    .fromTo(".energetic h2, .energetic h5", { y:(i)=>[40,60][i] },{ length: 1.5, y: 0, ease: "expo" }, 0.3)

    // skip energetic slide animation on first run
    .progress( firstRun? 1: 0 )
}

Including Parallax – GSAP Demo 2C

To make the motion extra partaking, let’s calculate every slide’s horizontal progress and use it to create a parallax impact.

Till now, we haven’t modified the helper operate. Nonetheless, to calculate slide progress, this model contains one change inside horizontalLoop().

Now, each time the carousel timeline updates, slideImgUpdate() is known as. This operate units every picture’s xPercent primarily based on the progress of its father or mother slide. Progress is 0 when the slide is offstage to the left, and 1 when it’s offstage to the best.

operate slideImgUpdate(){
  slides.forEach( slide => {
    const rect = slide.getBoundingClientRect();
    const prog = gsap.utils.mapRange(-rect.width, innerWidth, 0, 1, rect.x);
    const val = gsap.utils.clamp(0, 1, prog );
    gsap.set(slide.querySelector("img"), {
      xPercent: gsap.utils.interpolate(0, -50, val)
    });
  });
}

GSAP utility capabilities mapRange(), interpolate(), and clamp() make the progress calculation a lot simpler. Word, within the CSS, the width of .carousel-slide img is elevated to 150%, so there can be sufficient picture for a 50% horizontal motion.

Taking It Additional

There are countless methods you may construct on these demos, customizing each look and performance. A number of concepts embody:

• Modify what number of slides are proven without delay—a single, full-frame model could possibly be attention-grabbing, as may a number of smaller slides to create a cowl circulate impact. In each of these examples, the progress indicator additionally turned a enjoyable space for experimentation.
• Extra particulars could possibly be added by calling customized capabilities contained in the helper operate’s onPress, onRelease, or onThrowComplete callbacks. Right here’s yet another iteration on Demo 2, the place your complete carousel shrinks whereas the pointer is held down.
• The carousel may even function navigation for a separate animated web page component, like on Nite Riot.
• If you need the carousel to reply to mouse wheel actions, GSAP’s Observer plugin provides a simple technique to deal with these occasions.
• With GSAP’s matchMedia(), you may specify completely different animations for varied viewport widths and tailor conduct for customers who desire lowered movement.