Issue with GSAP and Flickity Carousel

[Stefano Monteiro]

Flickity has some mouse events methods such as pointerDown, pointerUp, DragMove, etc.  I have created an animation of text reveal and applied it to the mouseUp event. Everything works fine except when I trigger the same event before the previous animation has ended. I thought of conditioning the animation with .isActive() or .progress(), however I cannot access them and I am wondering if I could set it up differently.  Or even better, we could reset the current position if the animation is running already.

here is a Loom link to help see the issue

 

Here is the timeline I am sing to animate (line 120):

 

  const pointerUp = (elements) => {
    const tl = gsap.timeline();

    tl.set(elements.selectedText, {
      opacity: 1,
    }) .set(elements.chars, {
        yPercent: 80,
      })
      .to(elements.chars, {
        duration: 2,
        yPercent: -5,
        stagger: 0.05,
        ease: "power3.inOut",
      });

    return tl;
  };

 

 

and here is it being called inside Flickity pointerUp method:

 

      let options = {
        .
        .
        .
        .
          pointerUp: function (event, pointer) {
            console.log("pointerUp");
            console.log(pointerUp.isActive());
            console.log(pointerUp.progress());
  
            // If querying the Selected Slide needs t be dynamic (every time)
            elements.selectedText = gsap.utils.toArray(
              ".sm_slide.is-selected .sm_text"
            );
            elements.chars = gsap.utils.toArray(
              ".sm_slide.is-selected .sm_text div"
            );

            gsap.to(elements.images, {
              duration: 1,
              scale: 1,
              ease: "power1.inOut",
            });

            if (!hasDragged) {
              // Timeout to wait for pointerDown TL finish running
              setTimeout(() => {
                pointerUp(elements).invalidate().restart();
              }, 500);
            }
          },
    	  .
          .
          .
          .
          

        },
      };

 

See the Pen bGYQvGR?editors=0010 by stefanomonteiro (@stefanomonteiro) on CodePen

[OSUblake]

Hi Stefano,

 

We don't offer support for 3rd party tools and your demo has several hundred lines of code. If you could simplify your demo down to the core issue you are having with GSAP, preferable without Flickity, I'm sure we can get you headed in the right direction. Thanks.