Web Bae

Hello, I'm trying out MotionPathPlugin and got it working pretty well. The only problem I'm having is that when I resize the window, the gsap path doesn't adjust (though the SVG path does). My example: https://gsap-svg-motion-path-2c092395cde6d4a702.webflow.io/ Example I want to achieve: https://codepen.io/GreenSock/pen/LwzMKL I could write function to reset the tween on window resize event but don't see anything like that in the "example I want to achieve" codepen. Am I missing something? Thanks! Keegan

Thank you! ?

mButton.addEventListener("click", (e: Event) => { let xDist = (e as PointerEvent).clientX - mButton.getBoundingClientRect().x let yDist = (e as PointerEvent).clientY - mButton.getBoundingClientRect().y gsap.set(circle, { left: xDist, top: yDist }) gsap.fromTo(circle, { scale: 0, opacity: 1 }, { scale: 1, opacity: 0, duration: .5, ease: "ease.out" }) console.log(gsap.globalTimeline.getChildren()) }) I have a button that trigger as .fromTo on click. Animation is working great, gsap.globalTimeline.getChildren() only return the active animation(s) from console log statement. My question: does the tween kill itself upon completion? Just wondering what the best practice is here? If it doesn't kill itself is it wise to call .kill() onComplete? Or maybe store the tween in a variable and check it if already exists? If it doesn't kill itself, is there a way to check how many tweens are still "alive"? OK that was 3 questions sorry about that one! Thanks! Keegan

Thanks Jack! I appreciate your thoughtful responses.

Thank you Jack! Two questions: 1. is the .kill() necessary? Animation seems to be working fine without it and my understanding of how you wrote the code is that we just need to set progress to zero while we recalculate then update back to the progress that we stored earlier? 2. Does it make sense to debounce the loop() function on the resize event? I'll have a play with it to see but figured I would ask you too. Thanks again - really appreciate the help. EDIT: I debounced it and it gives a very slight skip as the tween is recalculated but I feel like this is better than running the code without debounce ... just because. Not really sure how concerned I should be about debouncing it or not. https://codepen.io/learyjk/pen/xxjmBMP

Thanks Trapti - Yes sorry about the horizontal scroll no worries on that it's an easy fix. The gap is set to 2rem. So I need to translate by the marquee-content width (100%) + gap distance (2rem). I converted the rem to percentage here: let gapDistPercent = (gap / marqueeWidth) * 100; Now that I'm looking at it maybe I should give vw a go instead of %.

Hello, I am making an infinite scroll animation. It works great on initial look, and actually is hard to tell in the code pen, but gets a "jump" after resizing the window. You can probably notice it better here: https://marquee-207786.webflow.io/ which is running the same code. Is there a way to recalculate the distanceToMove variable on each repeat? I tried the onRepeat function but didn't have any luck there. I also tried passing a function to the translateX parameter and returning the value there but didn't work either. I threw it in to the code pen so I could post my question here but it actually works pretty well in the codepen even after resize ?. Anyways, figured I would ask to see if anyone has any tips. Thanks!

So fire. ?. Thank you so much. One other thing - is it possible to give the main image a delay so it waits until the thumb takes up its place as the main image? This way we can avoid the bit of white that shows off to the side? Again thanks again for having a look. Really appreciate it. EDIT - I was able to get it working after some fiddling. thanks again!

Hello, I am trying to create a layout that infinitely swaps images between three different divs (main, thumb, and staging). An example of what I am trying to create is here: https://cms-slides-2.webflow.io/ I wanted to see if I could build that animation using GSAP FLIP plugin but am having trouble getting my images to animate as seen in the codepen.io link. I have attached a screenshot that displays the general flow. Would appreciate any thoughts or recommendations or links to similar build in GSAP! Thank you!