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); } }, . . . . }, };

Love it!! Thanks a lot again

Awesome, nice approach. Quick questions though. 1. Any specific reason to switch the document.querySelector togsap.utils.toArray 2. More of a JS question, so feel free to skip it. But never seen the && being used like this bgTween && bgTween.pause(); Anywhere you could point me out to understand this better? Thanks a lot for this forum and helps.

Hi, Here is an improved version of my code above, where instead of change the src attribute I created a div for each image and change the z-index on mouseenter. It is working, however the bgTween running all the time of all of the images. Ideally, it would only run for the image with the z-index, or when the mouse enter the respective container. How can I play, pause, restart only an individual tween? https://codepen.io/stefanomonteiro/pen/mdqRpRO?editors=0010

I have this marquee text using the helper function `horizontalLoop`. For some reason the `scrub` is not working, nor is the `reversed` property of the helper function.

Ah Awesome. I did find another solution too. I changed the tween to .from to .fromTo and move the chars a little higher than 0. //Older Code .from( elements.text, { duration: 2, yPercent: 80, stagger: 0.05, ease: "power3.inOut", }, ">-1.5" ); // New Code .fromTo( elements.text, { yPercent: 80, }, { yPercent: -5, duration: 2, stagger: 0.05, ease: "power3.inOut", }, ">-1.5" ); Thanks

Let me see what I can do @OSUblake. The main issue is with the font I am using and I cannot get to add it on Codepen.

Hi, So I have the bottom of my text being cut off by it's overflow hidden. I am using splitText to animate it and to have the reveal effect I set the `h2.sm_text` to have its overflow hidden. Is there a common fix for this?

That's exactly what I was trying to do. Really appreciate your time going beyond and solving the puzzle. This community is priceless. Thanks

Hi, I am running through a few issues trying to animate a background image position. 1. I would like it to repeat, but it is acting weird when it gets to the end. And it returns to a point close to the end (100%), not to 0. 2. The background position should reset on `mouseenter` so new images start from the top. 3. It seems that the easing:"linear" is not working. Could it be because the other tween the image has?

Try adding or || in your condition. Or even and && , if you need the code to run if all classes are present in the page. if(document.querySelector('.js-class-1') || document.querySelector('.js-class-1-wrap > *')){ // for all classes gsap.utils.toArray("" + ".js-class-1, .js-class-1-wrap > *," + ".js-class-2, .js-class-2-wrap > *") // and so on, a long list of classes/css selectors .forEach(el => { gsap.from(el, { scrollTrigger: { trigger: el, once: true, }, y: animUpY, autoAlpha: 0, }); }); }

Thanks Cassie. Silly mistake o the Position. About the svg, the path d property has two lines. One being the inside of the A. The code is at the end (M59.46,121H43.85L59.46,98.51Z). Differently than I thought it is being drawn, but very quickly at the beginning. Is there any way to animate this line separately, even though is part of the same path? https://codepen.io/stefanomonteiro/pen/WNRZmGO

Hi, Two issues I am facing here: 1 - Shouldn't the second tween start half way trough the first with '-=50%? 2 - Why is the inside of the A not animating? Also, anyway to make the animation start from the left bottom of the svg?

Not sure that is the best way to describe what I am trying to achieve, basically I want to have the sections behaving as parallax when scrolling. So, it should have a nice and smooth feel. I thought of using the scrollTrigger onUpdate to retrieve the progress and direction. However, not sure how to implement them on the yPercent

Sorry the topic was off the guidelines. I was thinking the change was going to be in the helper function. That worked perfectly. Thank you very much!