Mastering Carousels with GSAP: From Fundamentals to Superior Animation

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

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

What You’ll Study

Primary carousel implementation utilizing HTML and CSS
The right way 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:


    
    
      
      We're No
      Strangers to like
    
        
    ...

.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;
  shade: 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 strong #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 outcome:

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

Word that the HTML above is deliberately concise. Nevertheless, in manufacturing, it’s essential to comply with accessibility finest practices, together with utilizing alt textual content on photographs and descriptive ARIA attributes for display reader customers.

Constructing on the Basis – GSAP Demo 1A

To see how GSAP can improve a carousel, we’ll discover two totally different approaches—the primary utilizing gsap.utils.wrap(). Wrap is one in every 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

block has been added that comprises earlier/subsequent buttons and progress textual content:

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

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

Within the JS, we override the carousel’s scroll-snap-type and show the

block. Since we now not have a scrollable space, the buttons are needed to take care of keyboard accessibility. Safari requires tabindex="0" to permit customers to tab to them. Moreover, aria-labels are essential because the buttons don’t have 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 destructive 1. Inside this operate, we:

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

The totally different easing on the outro and intro tweens helps stop extreme overlapping opacity in the course of 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}` });

}

Sharpening 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 focusing on the slides themselves, we set the opacity of their little one parts to 0—aside from these within the first slide.

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

Then, we do the next inside changeSlide():

Retailer a reference to the outgoing slide’s youngsters
Replace currentIndex, simply as earlier than
Create a const for the incoming slide’s youngsters
Kill tweens on each slides’ youngsters to stop conflicts if slides change quickly
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 primary setup could be simply personalized additional. Animating a clip-path, making use of a blur filter, or experimenting with extra 3D transforms might all produce attention-grabbing outcomes.

A Totally different Strategy – GSAP Demo 2A

One other method 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 primary implementation:

Once more, we override the CSS and show the

aspect. 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 lively slide to the middle
  onChange: (slide, index) => { // known as when the lively slide adjustments
    if (activeSlide) {
      gsap.to(".lively", { opacity: 0.3 });
      activeSlide.classList.take away("lively");
    }
    slide.classList.add("lively");
    activeSlide = slide;
    gsap.to(".lively", { opacity: 1, ease: "power2.inOut" });
    gsap.set(".carousel-nav div", { innerText: `${index + 1}/${slides.size}` });
  }
});

Probably the most notable of those choices is the onChange callback, the place we are able to write code that executes every time the lively slide adjustments. On this instance, we’re eradicating and including the “lively” 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 lively slide.

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

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

In the event you’re unfamiliar with function-based values in GSAP, that is an superb function—undoubtedly take a look at that hyperlink to find out how they work. Right here, we’re iterating by way of every aspect 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’ll be able to set draggable: true within the config object.

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

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

    // fade within the new lively slide
    .to(".lively", { 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(".lively h2, .lively h5", { opacity: 1, ease: "power1.inOut" }, 0.3)
    .fromTo(".lively h2, .lively h5", { y:(i)=>[40,60][i] },{ length: 1.5, y: 0, ease: "expo" }, 0.3)

    // skip lively 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. Nevertheless, to calculate slide progress, this model contains one change inside horizontalLoop().

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

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 might be sufficient picture for a 50% horizontal motion.

Taking It Additional

There are limitless methods you possibly can 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 might be attention-grabbing, as might a number of smaller slides to create a cowl move impact. In each of these examples, the progress indicator additionally turned a enjoyable space for experimentation.
Extra particulars might be added by calling customized capabilities contained in the helper operate’s onPress, onRelease, or onThrowComplete callbacks. Right here’s yet one more iteration on Demo 2, the place your complete carousel shrinks whereas the pointer is held down.
The carousel might even function navigation for a separate animated web page aspect, like on Nite Riot.
If you need the carousel to answer mouse wheel actions, GSAP’s Observer plugin gives a simple method to deal with these occasions.
With GSAP’s matchMedia(), you’ll be able to specify totally different animations for varied viewport widths and tailor habits for customers who choose diminished movement.