Michael31

Wow, that was fast. Thank you very much for your feedback.

I'm using a lot of quickTo methods on several pages of my website. Since I'm using AJAX, I'd love to kill every tween on each transition. I've been wondering how to properly kill a gsap.quickTo() ? xTo = gsap.quickTo(object.position, "x", {duration: 0.6, ease: "power3"}) The following line doesn't work and create an error : xTo.kill() // creates an error Is my quickTo() method properly killed if I'm using instead this line (which doesn't return an error): gsap.killTweensOf(xTo) Thank you very much!

Thanks for your explanations. I actually managed to get the result I wanted buy setting the transformOrigin before my tween : Have a nice day! gsap.set('svg path',{ scale:0.8, transformOrigin:'center center' }) gsap.to('svg path',{ scale:1, stagger:0.07, duration:1 })

I've an svg made of simple paths. I want to scale up each path individually, based on their own centers. I'm really struggling to preserve the transform-box: fill-box css property. I also tried to set the transform-origin with GSAP directly but it doesn't change a thing. I tried to animate those paths with a simple css animation and it works correctly. Does anyone know what I'm missing with my tween ? Thank you very much

Once again, thank you!

Eventually, I've one last issue with this solution : I'm working with es6 classes and I don't manage to access the offset value in an external scope. I tried to replace let offset with this.offset but it's not read inside the proxy object anymore. Is there a way to convert the getter and setter of the proxy with arrow functions ? Thanks you very much https://codepen.io/michaelgrc/pen/qBKWVdo?editors=0010

That helps a lot. Amazing solution. Thank you very much!

On my wheel event, I want to animate the position of a sentence along an svg path. I wrote my sentence several times so I can reset the textpath position to pretend it loops infinitely. At the moment it works great. My only issue is that when I reset the textpath position I lose the easing of the previous tween. I read this post and it helped a lot (from what I understand, you can't make a quickTo with svg attributes) : Here's my code : let attr = {}, myTween = gsap.to("#myTextPath", {attr: attr, duration: 0.5, ease: "power3"}), old = 0 window.addEventListener('wheel', (e) => { attr.startOffset = -old + '%'; old = old + e.deltaY/10 if(old > distanceReset){ gsap.killTweensOf('#myTextPath') gsap.set("#myTextPath", { attr:{ startOffset:"0%" }, }) old = 0; }else{ myTween.invalidate().restart(); } }) How can I reset my tween position and make it seemless ? Thank you very much

Thank you! Indeed it works like a charm!

I'd like to do some animations with the elastic.inOut easing. On the other hand I don't want the elastic part on my ease in. Is there a way to obtain such an easing without the utilisation of CustomEase ? Indeed, it's hard to get precise with CustomEase. I'd like to have something like that : I dived into this outstanding tool but in vain : https://greensock.com/docs/v3/Eases Thank you very much

Indeed, the observer plugin worth definitely it in my case! Thanks for the advice. Also I didn't know about the "_short" trick, thit is literally awesome. Thanks again for your time!

I like to create a drag effect that makes my shape rotate around a circle. It works great, I'm also using the quickTo method to add some cool easing on it. My issue is that when the rotation is complete, it all starts again by reverting. I'd like to keep my current position and go back to 0 directly. Should I kill and recreate my quickTo tween when I'm beyond the complete rotation ? Thank you

Hello, I've been playing with the Flip plugin and it looks super powerful. I still have an issue though : I want to simply Flip.fit() an element regarding another. My problem is that the output element is moving and scaling. At the moment my element doesn't follow the output one. It only goes to its initial state. Is there a way to update the fit() value during its animation so my fit() element follow the other one during the animation ? I made a codepen to illustrate my problem. Thanks you very much

Hi everybody, I've been experiencing an issue with the MorphSVGPlugin. I've a shape composed of a path. I want this shape to transform into a basic rectangle. When I animate it, the transformation looks weird as you can see here : - video - codepen (it looks like we can't use MorphSVGPlugin on Codepen) So I've been wondering how can I improve my animation because so far it's not very beautiful, it's not even symmetric. For your information, I already tried to convert my rectangle to a path and I've the exact same render. Thanks a lot

Thanks a lot for your answer. I didn't know this method. I'm gonna dive into it!