joeworkman

Perfect! Thanks

If you start an animation with MotionPath plugin set to paused, then the element that will get animated on the path is not actually added to the path. In order for this to work, you need to do something like `t.seek(0.001)`. While that does work, it feels like this should no be required. I would expect that the element to be animated on a path should start at the path when loaded, not when the animation has started.

If you use the `oldClass` option with a .from() tween with the TextPlugin, the animation does not work properly. The entire line simply displays all at once. Again, this only happens when you defined an oldClass inside of the from tween. It works inside of the `to` tween just fine. I updated one of the default demos to illustrate the issue.

Sorry for the delay everyone! Everything seems to be working fine today. It was happening to me for well over a week. Now it just magically starts working again. I do have some extensions but I am pretty picky with them because I know that they can cause issues. I will just blame the gremlins this time...

When I visit the docs in Safari, there is a JS error on the page. Seems to work fine in Firefox.

If you are on a trackpad or touch, it works like a charm. I never thought about mouse users to be honest. I have not used a mouse for probably 12 years. I published the new version just a few mins ago. The calculations are pretty decent. Sometimes, it stutters a pixel or two when it restarts. I assume that is round errors between GSAP and my calculation. I am not sure why they are exact. I am pretty happy with it though.

This got me really close but perfect. I am open to better solutions. I replaced the event listeners with the following... // loop + hover pause this.container.addEventListener("touchstart", () => { tl.pause(); this.scrollState = this.container.scrollLeft; }); this.container.addEventListener("mouseenter", () => { tl.pause(); this.scrollState = this.container.scrollLeft; }); this.container.addEventListener("mouseleave", () => { if (this.scrollState != this.container.scrollLeft) { const progress = (this.container.scrollLeft/(this.container.scrollWidth-this.container.offsetWidth))/2; tl.progress(progress); } tl.resume(); });

If you have a look at https://www.foundationstacks.com, there is a "Loved by Users" section that scrolls horizontally using GSAP. If you hover over it, it will pause. You can then also manually scroll horizontally at your leisure. When you mouse-out, I would like to restart the animation at the current position. How can I set the timeline to restart at a defined position, instead of seek to a point in the timeline before I resume the animation? const tl = gsap.timeline({ repeat: -1, repeatDelay: this.options.delay, paused: true, scrollTrigger: { trigger: this.container, onEnter: () => tl.play(), onEnterBack: () => tl.resume(), onLeave: () => tl.pause(), onLeaveBack: () => tl.pause(), } }); const easing = this.gsapEasingFunction(this.options.easeFunc,this.options.easeCurve); tl.to(this.container, {duration: this.options.timing, scrollTo:{y:0, x:"max"}, ease:easing}); tl.to(this.container, {duration: this.options.timingBack, delay: this.options.delay, scrollTo:{y:0, x:0}, ease:easing}); // hover pause this.container.addEventListener("touchstart", () => tl.pause()); this.container.addEventListener("mouseenter", () => tl.pause()); this.container.addEventListener("mouseleave", () => tl.resume());

Actually restart() is not what I was wanting. This is because it restarts the flip from side 1 every time. What you did in your codepen is what I was hoping to do with timelines. I thought about doing it the way that you have it but thought timelines were the better way to go. I guess I will stop using timelines then. Thanks again.

I hate when I feel like an idiot! I guess that is what I get for working late. Thank you Jack! Thanks for the advice on the multiple clicks. I actually discovered this by playing with it. I may add some classes with onStart and onComplete to protect me from that.

If you click on the square in my codepen, it flips. However, if you click on it again, the timeline does not run again. I have tried many different things using repeatRefresh and invalidate but I could not figure out the magic sauce. Thanks in advance for the assistance.

Thanks guys. I will plays around with your ideas today and post back the results.

I am thinking in more of a responsive setting where the animated element is not fixed width. When the browser gets resized, the animated element could have its size be different. This means that the transformOrigin property would need to be updated. Does that make sense?

I am using transformOrigin and would love to have the Z part of that be dynamic. I need to it either be 50% of the width or height, depending on what I am animating. Is there any way to do this without watching for browser resize events and update the animation based on the size of the element? Here is an example that I am using. I would like that `-25px` part dynamic somehow. gsap.set(".qf-card", { transformOrigin: "50% 50% -25px" });

Oh I feel so stupid now! How obvious...