Enter

Resources

    Icons (SVG)

      We couldn't found a match for "Lorem ipsum"

      Welcome to the Vault 👋

      Hey Name, we are super excited to have you on board. Thanks for the support and hopefully Osmo becomes your go-to place for inspiration and development tips-and-tricks. Enjoy! - Ilja & Dennis

      0:00

      Upgrade to lifetime

      We’re offering an exclusive €50 discount when you upgrade to a Lifetime membership. We’ll deduct the cost of your current subscription cycle.

      Lifetime Bonus
      As a bonus you’ll also receive our complete marketing website—as a Webflow cloneable or a folder containing all HTML, CSS & JS assets.

      Use discount code:

      TPJH9Q26

      Upgrade to lifetime

      -€50

      Osmo Slack Community

      Help, share, and inspire each other—this is the space to talk about animations all day long and connect with other Osmo members.

      Join Slack Community

      Need help?

      Unfortunately, we don’t currently have the capacity to answer all questions individually—but that’s why we created the Osmo community!

      It’s a space where members can come together to share tips, troubleshoot, and collaborate. Whether you’re dealing with a tricky bug, need advice, or just want to connect with like-minded creatives, our community is here for you.

      Join Slack Community

      Copied SVG to clipboard
      Something went wrong
      Copied code to clipboard
      Something went wrong
      Saved to bookmarks!
      Removed from bookmarks
      Webflow Challenge: Win $5K

      Default

      User image

      Default

      Name

      • -€50
        Upgrade to Lifetime
      The Vault/

      Flick Cards Slider

      Search
      K
      Flick Cards Slider

      Live Preview

      Documentation

      Webflow

      Code

      Setup: External Scripts

      External Scripts in Webflow

      Make sure to always put the External Scripts before the Javascript step of the resource.

      In this video you learn where to put these in your Webflow project? Or how to include a paid GSAP Club plugin in your project?

      Watch the video

      HTML

      Copy
      <script src="https://cdn.jsdelivr.net/npm/gsap@3.13.0/dist/gsap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/gsap@3.13.0/dist/Draggable.min.js"></script>

      Step 1: Copy structure to Webflow

      Copy structure to Webflow

      In the video below we described how you can copy + paste the structure of this resource to your Webflow project.

      Watch the video

      Copy to Webflow

      Webflow structure is not required for this resource.

      Step 1: Add HTML

      HTML

      Copy
      
<div data-flick-cards-init="" class="flick-group">
  <div class="flick-group__relative-object">
    <div class="flick-group__relative-object-before"></div>
  </div>
  <div data-flick-cards-collection="" class="flick-group__collection">
    <div data-flick-cards-list="" class="flick-group__list">
      <div data-flick-cards-item-status="" data-flick-cards-item="" class="flick-group__item">
        <div class="flick-card">
          <div class="flick-card__before"></div>
          <div class="flick-card__media">
            <img width="256" loading="lazy" alt="" src="https://cdn.prod.website-files.com/684ab5dddc581e3b1766332f/687df8b27e36f68b959afd96_slider-image-1.avif" class="cover-image">
            <a href="#" class="flick-card__btn"><span class="flick-card__btn-span">Get this product</span></a>
            <h3 class="flick-card__h3">FX100</h3>
          </div>
        </div>
      </div>
      <div data-flick-cards-item-status="" data-flick-cards-item="" class="flick-group__item">
        <div class="flick-card">
          <div class="flick-card__before"></div>
          <div class="flick-card__media">
            <img width="256" loading="lazy" alt="" src="https://cdn.prod.website-files.com/684ab5dddc581e3b1766332f/687df8b21d85143b1c286d20_slider-image-8.avif" class="cover-image">
            <a href="#" class="flick-card__btn"><span class="flick-card__btn-span">Get this product</span></a>
            <h3 class="flick-card__h3">LX200</h3>
          </div>
        </div>
      </div>
      <div data-flick-cards-item-status="" data-flick-cards-item="" class="flick-group__item">
        <div class="flick-card">
          <div class="flick-card__before"></div>
          <div class="flick-card__media">
            <img width="256" loading="lazy" alt="" src="https://cdn.prod.website-files.com/684ab5dddc581e3b1766332f/687df8b18ade0b890d5ab1fb_slider-image-5.avif" class="cover-image">
            <a href="#" class="flick-card__btn"><span class="flick-card__btn-span">Get this product</span></a>
            <h3 class="flick-card__h3">TX5</h3>
          </div>
        </div>
      </div>
      <div data-flick-cards-item-status="" data-flick-cards-item="" class="flick-group__item">
        <div class="flick-card">
          <div class="flick-card__before"></div>
          <div class="flick-card__media">
            <img width="256" loading="lazy" alt="" src="https://cdn.prod.website-files.com/684ab5dddc581e3b1766332f/687df8b263e10957f9c08e32_slider-image-4.avif" class="cover-image">
            <a href="#" class="flick-card__btn"><span class="flick-card__btn-span">Get this product</span></a>
            <h3 class="flick-card__h3">NX400</h3>
          </div>
        </div>
      </div>
      <div data-flick-cards-item-status="" data-flick-cards-item="" class="flick-group__item">
        <div class="flick-card">
          <div class="flick-card__before"></div>
          <div class="flick-card__media">
            <img width="256" loading="lazy" alt="" src="https://cdn.prod.website-files.com/684ab5dddc581e3b1766332f/687df8b288a95313e0dd5d6a_slider-image-2.avif" class="cover-image">
            <a href="#" class="flick-card__btn"><span class="flick-card__btn-span">Get this product</span></a>
            <h3 class="flick-card__h3">TX9</h3>
          </div>
        </div>
      </div>
      <div data-flick-cards-item-status="" data-flick-cards-item="" class="flick-group__item">
        <div class="flick-card">
          <div class="flick-card__before"></div>
          <div class="flick-card__media">
            <img width="256" loading="lazy" alt="" src="https://cdn.prod.website-files.com/684ab5dddc581e3b1766332f/687df8b2c53e6feaa864a913_slider-image-3.avif" class="cover-image">
            <a href="#" class="flick-card__btn"><span class="flick-card__btn-span">Get this product</span></a>
            <h3 class="flick-card__h3">RX300</h3>
          </div>
        </div>
      </div>
      <div data-flick-cards-item-status="" data-flick-cards-item="" class="flick-group__item">
        <div class="flick-card">
          <div class="flick-card__before"></div>
          <div class="flick-card__media">
            <img width="256" loading="lazy" alt="" src="https://cdn.prod.website-files.com/684ab5dddc581e3b1766332f/687df8b2527cd8ea76517edb_slider-image-7.avif" class="cover-image">
            <a href="#" class="flick-card__btn"><span class="flick-card__btn-span">Get this product</span></a>
            <h3 class="flick-card__h3">KX120</h3>
          </div>
        </div>
      </div>
      <div data-flick-cards-item-status="" data-flick-cards-item="" class="flick-group__item">
        <div class="flick-card">
          <div class="flick-card__before"></div>
          <div class="flick-card__media">
            <img width="256" loading="lazy" alt="" src="https://cdn.prod.website-files.com/684ab5dddc581e3b1766332f/687df8b2974f10a7083f8698_slider-image-6.avif" class="cover-image">
            <a href="#" class="flick-card__btn"><span class="flick-card__btn-span">Get this product</span></a>
            <h3 class="flick-card__h3">MX60</h3>
          </div>
        </div>
      </div>
      <div data-flick-cards-item-status="" data-flick-cards-item="" class="flick-group__item">
        <div class="flick-card">
          <div class="flick-card__before"></div>
          <div class="flick-card__media">
            <img width="256" loading="lazy" alt="" src="https://cdn.prod.website-files.com/684ab5dddc581e3b1766332f/687df8b2617e89ca885628e5_slider-image-9.avif" class="cover-image">
            <a href="#" class="flick-card__btn"><span class="flick-card__btn-span">Get this product</span></a>
            <h3 class="flick-card__h3">ZV210</h3>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

      HTML structure is not required for this resource.

      Step 2: Add CSS

      CSS

      Copy
      .flick-group {
  position: relative;
}

.flick-group__relative-object {
  opacity: 0;
  pointer-events: none;
  width: 47em;
  position: relative;
}

.flick-group__relative-object-before {
  padding-top: 75%;
}

.flick-group__collection {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

.flick-group__list{
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  display: flex;
  position: relative;
}

.flick-group__item {
  position: absolute;
}

.flick-card {
  color: #fff;
  -webkit-user-select: none;
  user-select: none;
  background-color: #000;
  border-radius: 1em;
  justify-content: center;
  align-items: center;
  width: 23.5em;
  display: flex;
  position: relative;
  overflow: hidden;
}

.flick-card__before {
  padding-top: 150%;
}

.flick-card__media {
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  display: flex;
  position: absolute;
  top: 0;
  left: 0;
}

.cover-image {
  pointer-events: none;
  object-fit: cover;
  -webkit-user-select: none;
  user-select: none;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: auto;
}

.flick-card__h3 {
  letter-spacing: -.025em;
  font-size: 4em;
  font-weight: 500;
  line-height: 1;
  position: absolute;
}

.flick-card__btn {
  background-color: #000;
  border-radius: .375em;
  justify-content: center;
  align-items: center;
  width: calc(100% - 4em);
  height: 3.25em;
  text-decoration: none;
  display: flex;
  position: absolute;
  bottom: 2em;
  left: 2em;
}

.flick-card__btn-span {
  color: #fff;
  font-size: 1em;
  font-weight: 500;
}

[data-flick-cards-dragger] {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: auto;
  touch-action: pan-y;
}

/* Position Slides */
[data-flick-cards-item-status] .flick-card__media {
  transition: opacity 0.2s ease;
  opacity: 0.5;
}

[data-flick-cards-item-status="2-before"] .flick-card__media,
[data-flick-cards-item-status="2-after"] .flick-card__media {
  transition: opacity 0.2s ease;
  opacity: 0.75;
}

[data-flick-cards-item-status="active"] .flick-card__media {
  opacity: 1;
}

/* Animate Button */
[data-flick-cards-item-status] .flick-card__btn {
  transition: opacity 0.4s cubic-bezier(0.625, 0.05, 0, 1), 1s cubic-bezier(0.16, 1, 0.3, 1);
  opacity: 0;
  transform: translate(0%, 50%) rotate(0.001deg);
}

[data-flick-cards-item-status="active"] .flick-card__btn {
  opacity: 1;
  transform: translate(0%, 0%) rotate(0.001deg);
}

      Step 2: Add custom Javascript

      Custom Javascript in Webflow

      In this video, Ilja gives you some guidance about using JavaScript in Webflow:

      Watch the video

      Step 2: Add Javascript

      Step 3: Add Javascript

      Javascript

      Copy
      gsap.registerPlugin(Draggable);

function initFlickCards() {
  const sliders = document.querySelectorAll('[data-flick-cards-init]');

  sliders.forEach(slider => {
    const list = slider.querySelector('[data-flick-cards-list]');
    const cards = Array.from(list.querySelectorAll('[data-flick-cards-item]'));
    const total = cards.length;
    let activeIndex = 0;

    const sliderWidth = slider.offsetWidth;
    const threshold = 0.1;

    // Generate draggers inside each card and store references
    const draggers = [];
    cards.forEach(card => {
      const dragger = document.createElement('div');
      dragger.setAttribute('data-flick-cards-dragger', '');
      card.appendChild(dragger);
      draggers.push(dragger);
    });

    // Set initial drag status
    slider.setAttribute('data-flick-drag-status', 'grab');

    function getConfig(i, currentIndex) {
      let diff = i - currentIndex;
      if (diff > total / 2) diff -= total;
      else if (diff < -total / 2) diff += total;

      switch (diff) {
        case  0: return { x: 0,   y: 0,   rot: 0,  s: 1,   o: 1, z: 5 };
        case  1: return { x: 25,  y: 1,   rot: 10, s: 0.9, o: 1, z: 4 };
        case -1: return { x: -25, y: 1,   rot: -10,s: 0.9, o: 1, z: 4 };
        case  2: return { x: 45,  y: 5,   rot: 15, s: 0.8, o: 1, z: 3 };
        case -2: return { x: -45, y: 5,   rot: -15,s: 0.8, o: 1, z: 3 };
        default:
          const dir = diff > 0 ? 1 : -1;
          return { x: 55 * dir, y: 5, rot: 20 * dir, s: 0.6, o: 0, z: 2 };
      }
    }

    function renderCards(currentIndex) {
      cards.forEach((card, i) => {
        const cfg = getConfig(i, currentIndex);
        let status;

        if (cfg.x === 0)        status = 'active';
        else if (cfg.x === 25)  status = '2-after';
        else if (cfg.x === -25) status = '2-before';
        else if (cfg.x === 45)  status = '3-after';
        else if (cfg.x === -45) status = '3-before';
        else                    status = 'hidden';

        card.setAttribute('data-flick-cards-item-status', status);
        card.style.zIndex = cfg.z;

        gsap.to(card, {
          duration: 0.6,
          ease: 'elastic.out(1.2, 1)',
          xPercent: cfg.x,
          yPercent: cfg.y,
          rotation: cfg.rot,
          scale: cfg.s,
          opacity: cfg.o
        });
      });
    }

    renderCards(activeIndex);

    if (total < 7) {
      console.log('Not minimum of 7 cards');
      return;
    }

    let pressClientX = 0;
    let pressClientY = 0;

    Draggable.create(draggers, {
      type: 'x',
      edgeResistance: 0.8,
      bounds: { minX: -sliderWidth / 2, maxX: sliderWidth / 2 },
      inertia: false,

      onPress() {
        pressClientX = this.pointerEvent.clientX;
        pressClientY = this.pointerEvent.clientY;
        slider.setAttribute('data-flick-drag-status', 'grabbing');
      },

      onDrag() {
        const rawProgress = this.x / sliderWidth;
        const progress = Math.min(1, Math.abs(rawProgress));
        const direction = rawProgress > 0 ? -1 : 1;
        const nextIndex = (activeIndex + direction + total) % total;

        cards.forEach((card, i) => {
          const from = getConfig(i, activeIndex);
          const to = getConfig(i, nextIndex);
          const mix = prop => from[prop] + (to[prop] - from[prop]) * progress;

          gsap.set(card, {
            xPercent: mix('x'),
            yPercent: mix('y'),
            rotation: mix('rot'),
            scale: mix('s'),
            opacity: mix('o')
          });
        });
      },

      onRelease() {
        slider.setAttribute('data-flick-drag-status', 'grab');

        const releaseClientX = this.pointerEvent.clientX;
        const releaseClientY = this.pointerEvent.clientY;
        const dragDistance = Math.hypot(releaseClientX - pressClientX, releaseClientY - pressClientY);

        const raw = this.x / sliderWidth;
        let shift = 0;
        if (raw > threshold) shift = -1;
        else if (raw < -threshold) shift = 1;

        if (shift !== 0) {
          activeIndex = (activeIndex + shift + total) % total;
          renderCards(activeIndex);
        }

        gsap.to(this.target, {
          x: 0,
          duration: 0.3,
          ease: 'power1.out'
        });

        if (dragDistance < 4) {
          // Temporarily allow clicks to pass through
          this.target.style.pointerEvents = 'none';

          // Allow the DOM to register pointer-through
          requestAnimationFrame(() => {
            requestAnimationFrame(() => {
              const el = document.elementFromPoint(releaseClientX, releaseClientY);
              if (el) {
                const evt = new MouseEvent('click', {
                  view: window,
                  bubbles: true,
                  cancelable: true
                });
                el.dispatchEvent(evt);
              }

              // Restore pointer events
              this.target.style.pointerEvents = 'auto';
            });
          });
        }
      }
    });
  });
}

// Initialize Flick Cards Slider
document.addEventListener('DOMContentLoaded', function() {
  initFlickCards();
});

      Step 3: Add custom CSS

      Step 2: Add custom CSS

      Custom CSS in Webflow

      Curious about where to put custom CSS in Webflow? Ilja explains it in the below video:

      Watch the video

      CSS

      Copy
      [data-flick-cards-dragger] {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: auto;
  touch-action: pan-y;
}

/* Position Slides (also in Webflow Designer) */
[data-flick-cards-item-status] .flick-card__media,
:is(.wf-design-mode, .w-editor) .flick-card__media {
  transition: opacity 0.2s ease;
  opacity: 0.5;
}

[data-flick-cards-item-status="2-before"] .flick-card__media,
[data-flick-cards-item-status="2-after"] .flick-card__media,
:is(.wf-design-mode, .w-editor) .flick-group__item:nth-child(2) .flick-card__media,
:is(.wf-design-mode, .w-editor) .flick-group__item:nth-last-child(1) .flick-card__media{
  transition: opacity 0.2s ease;
  opacity: 0.75;
}

[data-flick-cards-item-status="active"] .flick-card__media,
:is(.wf-design-mode, .w-editor) .flick-group__item:nth-child(1) .flick-card__media {
  opacity: 1;
}

:is(.wf-design-mode, .w-editor) .flick-group__item:nth-child(1) {z-index: 4;}
:is(.wf-design-mode, .w-editor) .flick-group__item:nth-child(2) {transform: translate(25%, 1%) rotate(10deg) scale(0.9, 0.9);z-index: 3;}
:is(.wf-design-mode, .w-editor) .flick-group__item:nth-child(3) {transform: translate(45%, 5%) rotate(15deg) scale(0.8, 0.8);z-index: 2;}
:is(.wf-design-mode, .w-editor) .flick-group__item:nth-last-child(1) {transform: translate(-25%, 1%) rotate(-10deg) scale(0.9, 0.9);z-index: 3;}
:is(.wf-design-mode, .w-editor) .flick-group__item:nth-last-child(2) {transform: translate(-45%, 5%) rotate(-15deg) scale(0.8, 0.8);z-index: 2;}

/* Animate Button */
[data-flick-cards-item-status] .flick-card__btn,
:is(.wf-design-mode, .w-editor) .flick-group__item .flick-card__btn {
  transition: opacity 0.4s cubic-bezier(0.625, 0.05, 0, 1), 1s cubic-bezier(0.16, 1, 0.3, 1);
  opacity: 0;
  transform: translate(0%, 50%) rotate(0.001deg);
}

[data-flick-cards-item-status="active"] .flick-card__btn,
:is(.wf-design-mode, .w-editor) .flick-group__item:nth-child(1) .flick-card__btn {
  opacity: 1;
  transform: translate(0%, 0%) rotate(0.001deg);
}

      Implementation

      Container

      Place the [data-flick-cards-init] attribute on the outermost wrapper (the “slider container”). The script will look for every element with this attribute and initialize a separate slider instance for each.

      Note: Make sure to include at least 7 cards to enable drag interaction. Below 7, the cards will still position visually, but dragging will be disabled.

      List

      Add the [data-flick-cards-list] attribute to the element that contains all card items.

      Item

      Each individual card should use [data-flick-cards-item]. These cards will be transformed and get positioned based on their index.

      On load they also receive a [data-flick-cards-item-status] attribute with one of the following values:

      • Layer 1: "active"
      • Layer 2: "2-before" / "2-after"
      • Layer 3: "3-before" / "3-after"
      • Hidden Cards: "hidden"

      Use these status values to control visibility, pointer events, or z-index stacking in your CSS.

      Drag Status

      The root container will receive one of the following attributes during interaction. You can use this to change the cursor or visual state of the slider.

      • [data-flick-drag-status="grab"]
      • [data-flick-drag-status="grabbing"]
      Search
      K

      Live Preview

      Resource Details

      Slider
      Draggable
      GSAP
      Card
      Advanced
      Stacked

      Original source

      Dennis Snellenberg

      Creator Credits

      We always strive to credit creators as accurately as possible. While similar concepts might appear online, we aim to provide proper and respectful attribution.