How to use GSAP with Flickity and other sliders

With a little bit of Javascript, and the awesome GSAP library, we can easily customize our sliders.

Let study different sliders :

• with Flickity
• with the Carousel Builder of OxyExtras
• with the Slider Element of Oxygen
• with Swiper
• with Splide

GSAP with Flickity

I won't explain how to use Flickity here, as I have already wrote a tutorial: A Better Slider With Flickity
Basically, we have a slider (.myCarousel), that contains 3 slides (.myCarousel-cell) and each of these slide have some text elements (.myCarousel-cell-text).

Let's set the slider :

jQuery(document).ready(function($) {

    var carousel = $(".myCarousel").flickity({
        cellAlign: "left",
        contain: true,
    });

});

What we want to do is to animate the texts (.myCarousel-cell-text) when the slide comes into view.

We can easily capture events with Flickity ( more info in the official website : https://flickity.metafizzy.co/events.html ).
Which means that we can trigger a function when the selected slide is changed.

jQuery(document).ready(function($) {

    var carousel = $(".myCarousel").flickity({
        cellAlign: "left",
        contain: true,
    });

    carousel.on("change.flickity", function(event, index) {
        console.log("Slide changed to " + index)
    });

});

And to know which slide is the one that comes into view, the class .is-selected is automatically added to the current slide:

We have all the element we need to create our GSAP animations:

gsap.to(".myCarousel-cell.is-selected .myCarousel-cell-text",{...});

jQuery(document).ready(function($) {

    var carousel = $(".myCarousel").flickity({
        cellAlign: "left",
        contain: true,
    });

    carousel.on("change.flickity", function(event, index) {

        gsap.fromTo(".myCarousel-cell.is-selected .myCarousel-cell-text", {
            x: 600,
            autoAlpha: 0
        }, {
            duration: 1,
            ease: "bounce.out",
            x: 0,
            stagger: 0.1,
            autoAlpha: 1,
        });

    });

});

The result:

It's fine, but...

If the slider is not at the top of the page, it should be fine.

But if you plan to add a slider as a Hero section, we still have to fix some little things.

• To hide the FOUC effect, we can hide the slider first ( visibility:hidden ) and use GSAP to fade in.
• We can hide the text elements before we animate them (so you don't see them when you drag the slide).
• As the text elements of the first slide were not animated, we can also add the same animation

The following code is what we can see at the top of this page:

jQuery(document).ready(function($) {

    gsap.to(".myCarousel", {duration:2,autoAlpha:1});

    var carousel = $(".myCarousel").flickity({
        cellAlign: "left",
        contain: true,
    });

    carousel.on("change.flickity", function(event, index) {
      
        gsap.set(".myCarousel-cell-text", {autoAlpha: 0});
        gsap.fromTo(".myCarousel-cell.is-selected .myCarousel-cell-text", {
            x: 600,
            autoAlpha: 0
        }, {
            duration: 1,
            ease: "bounce.out",
            x: 0,
            stagger: 0.1,
            autoAlpha: 1,
        });

    });

    gsap.from(".myCarousel-cell.is-selected .myCarousel-cell-text", {
        duration: 1,
        ease: "bounce.out",
        x: 600,
        stagger: 0.1,
        autoAlpha: 0,
    });

});

Different animation for each slide

We simply have to use the index variable, that comes from the function.

if (index == 0) {
    gsap.fromTo(".myCarousel-cell.is-selected .myCarousel-cell-text", {
        x: 600,
        autoAlpha: 0
    }, {
        duration: 1,
        ease: "bounce.out",
        x: 0,
        stagger: 0.1,
        autoAlpha: 1,
    });
} else if (index == 1) {
    gsap.fromTo(".myCarousel-cell.is-selected .myCarousel-cell-text", {
        y: -200,
        autoAlpha: 0
    }, {
        duration: 1,
        ease: "bounce.out",
        y: 0,
        stagger: 0.1,
        autoAlpha: 1,
    });
} else if (index == 2) {
    gsap.fromTo(".myCarousel-cell.is-selected .myCarousel-cell-text", {
        x: 600,
        autoAlpha: 0
    }, {
        duration: 2,
        ease: "elastic.out(1, 0.3)",
        x: 0,
        stagger: 0.1,
        autoAlpha: 1,
    });
}

And here is how it looks like now:

GSAP with the Carousel Builder of OxyExtras

The Carousel Builder component also uses Flickity so the method is the same as the previous example, except that we don't have to create the slider in JS.
Instead, we have to access it in this way (big thanks to David Browne for the tip).

var carousel = $("#myExtraSlider").find($("#myExtraSlider").children().data("carousel"));
var cellClass = $("#myExtraSlider").children().data('cell');

carousel.on("change.flickity", function(event, index) {
    gsap.fromTo(cellClass+".is-selected h2", {...},{...});
});

#myExtraSlider is the ID of the Slider

GSAP with The Slider Element of Oxygen

And finally here is the way to do the same with the Slider element of Oxygen.
Special thanks to Alexander Buzmakov for the tip.

$(".oxygen-unslider-container").on("unslider.change", function(event, index, slide) {
    gsap.fromTo(".oxygen-unslider-container .unslider-active h1", {...}, {...});
});

A quick example:

GSAP with Swiper

Swiper is probably the most popular slider. It's also used by the new Composite Element: Dynamic Slider.

Here is an example :

swiper.on("slideChangeTransitionStart", function() {
    gsap.fromTo(".swiper-container .swiper-slide.swiper-slide-active h3", {
        y: 400,
        autoAlpha: 0
    }, {
        duration: 1,
        ease: "power4.out",
        y: 0,
        autoAlpha: 1
    });
});

More info about the events : https://swiperjs.com/swiper-api#events

Bruno Pirard wrote a tutorial here (it's in french but the code is easy to understand) : Animations Gsap dans un slider Swiper

GSAP with Splide

Splide is a lightweight slider, that is also used by OxyNinja.

Here is a full working example (Vanilla JS), by Rados/OxyNinja (Thanks a lots):

window.addEventListener("DOMContentLoaded", (event) => {
  gsap.set(".splide__slide h2", { autoAlpha: 0 });
  _ON_TEST.on("active", function (e) {
    gsap.set(".splide__slide h2", { autoAlpha: 0 });
    const slide = e.slide.children.item("h2");
    gsap.fromTo(
      slide,
      { y: 400, autoAlpha: 0 },
      { duration: 1, ease: "power4.out", y: 0, autoAlpha: 1 },
    );
  });
});