Flickity Slider Animation and Gsap

Question

The slider I am building have the active slider bigger than the others. I managed to make it work without the animation with flkty.reposition(). However, I am trying now to add the animation where the next slide grows in and the active decrease out. For The animation I am using GSAP.

The issue I am facing is to overwrite the left property with gsap so that it continuous animate. As of now, the left property (controlled by Flickity) does not take into account the final size (controlled by GSAP) of the selected slide.

https://codepen.io/stefanomonteiro/pen/VwzwjLw?editors=0010

score 0 · Answer 1 · answered Jan 27 '22 at 15:53

As the left property of each slide is controlled by Flickity, we could use margin-left with a minus value as an alternative property to pull the selected slide to the left. I know margin is not a good property to animate but it works in this case without digging too deep into the Flickity core.

Here is the GSAP code:

gsap.to(slides, {
    duration: 1,
    width: "220px",
    height: "336px"
});

gsap.to(selectedSlide, {
    duration: 1,
    marginLeft: "-248px", // the empty space calculated by newWidth - oldWidth
    width: "468px",
    height: "630px",
    onComplete: () => {
        // once all animations have been settled, we reset the margin
        gsap.set(selectedSlide, { marginLeft: "" });

        // and tell Flickity to update
        flkty.resize();
        flkty.reposition();
    }
});

And the snippets

const animate = () => {
  const flkty = Flickity.data(".carousel");
  const selectedSlide = flkty.selectedElement;
  const slides = flkty.getCellElements();

  // remove the selected slides
  slides.splice(flkty.selectedIndex, 1);

  gsap.to(slides, {
    duration: 1,
    width: "220px",
    height: "336px"
  });

  gsap.to(selectedSlide, {
    duration: 1,
    marginLeft: "-248px", // the empty space calculated by newWidth - oldWidth
    width: "468px",
    height: "630px",
    onComplete: () => {
      // once all animations have been settled, we reset the margin
      gsap.set(selectedSlide, {
        marginLeft: ""
      });

      // and tell Flickity to update
      flkty.resize();
      flkty.reposition();
    }
  });
};

new Flickity(".carousel", {
  cellAlign: "right",
  wrapAround: true,
  percentPosition: false,
  on: {
    ready: () => animate()
  }
});

const nextButton = document.querySelector(".flickity-button.next");
nextButton.addEventListener("click", () => animate());

/* external css: flickity.css */

* {
  box-sizing: border-box;
}

body {
  font-family: sans-serif;
}

.carousel {
  background: #EEE;
}

.carousel-cell {
  width: 220px;
  height: 336px;
  margin-right: 20px;
  background: #8C8;
  border-radius: 5px;
  counter-increment: carousel-cell;
}

.carousel-cell.is-selected {
  width: 468px;
  height: 630px;
  z-index: 1;
}


/* cell number */

.carousel-cell:before {
  display: block;
  text-align: center;
  content: counter(carousel-cell);
  line-height: 200px;
  font-size: 80px;
  color: white;
}

<link href="https://npmcdn.com/flickity@2/dist/flickity.css" rel="stylesheet" />
<script src="https://unpkg.co/gsap@3/dist/gsap.min.js"></script>
<script src="https://npmcdn.com/flickity@2/dist/flickity.pkgd.js"></script>
<h1>Flickity - wrapAround</h1>

<!-- Flickity HTML init -->
<div class="carousel">
  <div class="carousel-cell"></div>
  <div class="carousel-cell"></div>
  <div class="carousel-cell"></div>
  <div class="carousel-cell"></div>
  <div class="carousel-cell"></div>
</div>

And the Codepen

You can also notice that we have to wait until the animation is finished until we perform the next click, otherwise, it would mess up the whole process. This is predictable. Hence, I personally will try not to manipulate this Flickity slider for this kind of animation. Just want to give you a solution, anyway.

Flickity Slider Animation and Gsap

1 Answers1