Michael31

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!

On the back office of my website, the client can build pages using modules in the order he wants (for examples he can creates several horizontal scrolls or several pined sections) On the front side, I do something like this : // declarations document.querySelectorAll('.slider').forEach(slider => { // my scrolltriggers gsap.to('....', { scrollTrigger:slider, ... }); }); document.querySelectorAll('.horizontalScroll').forEach(horiS => { // my scrolltriggers gsap.to('....', { scrollTrigger:horiS, ... }); }); ScrollTrigger.refresh(); Unfortunately I can't chose the order of the sections in the DOM and I noticed it creates weird issues (regarding the start and end positions of all my scrollTriggers) . Even if I refresh all my scrollTrigger in the end, a lot of the trigger are not correctly set. Does anyone has good advices to prevent this behavior ? Thanks a lot.

I'd like to make a simple parallax, but I noticed I have a weird behavior when I link it with scroll trigger. And it's not the first time I observed it. I try to reproduce it on a codepen but it seems to work. Here's a screenshot of what happen on my website : https://michaelg.fr/jumps.mov It also happen sometimes when I do a mask reveal animation : when a child goes from -100% to 0%, regarding on the percentage of the parent in the viewport. Do you have any ideas on how to optimize this parallax effect, or this mask reveal effect ? Thank you very much

I got it ! I learnt a lot here. Thank you very very much for your time and your precious explanations 💥

Damn it looks cool ! So basically, when the ScrollTrigger.refresh() method is called, the getToValue() function is called too so the x: value is recalculated right ? And this won't be possible without the invalidateOnRefresh attribute set to true, double right ? I'm amazed with this solution, I'm gonna try it.

Hello everyone, I'm super glad to work with scrollTrigger, it's a very powerful tool. On the other hand, I can't manage a situation : In a modular page I might have several parts with an horizontal scroll. In order to animate these parts I'm doing this (and it works like a charm) : // each time there an horizontal scroll document.querySelectorAll('.carousel').forEach(carou => { // calculating the width of the section const translate = carou.querySelector('.innerCarou').clientWidth - window.innerWidth; gsap.to(carou.querySelector('.innerCarou'), { x: -1 * translate + 'px', ease:"power1.inOut", scrollTrigger: { trigger: carou, start: 'top top', end: '+=' + translate + 'px', pin: true, scrub: true } }) }) But it happens that the width of my horizontal scroll changes. So I'm calling the ScrollTrigger.refresh() method to update all my scrollTriggers. Unfortunately, my variable translate is not updated so my gsap is not correctly working. How can I manage to update both my gsap and its variables ? Thanks a lot

That makes sense indeed. Once again thanks for the explanations !

Hi, I would like to kill my ticker now. Unfortunately, it doesn't seems to work when I reproduce the model of the arrow function that starts my ticker : // lauch my ticker, it works gsap.ticker.add(() => this.playTicker()); // remove my ticker, it doesn't work gsap.ticker.remove(() => this.playTicker()); I made a codePen to illustrate my issue : my init function lunch the ticker and my kill function is supposed to remove it. You can see my ticker is still running after I called the kill method. https://codepen.io/michaelgrc/pen/qBqogBy Does anyone see what I'm missing ? Thank you very much

Hey @ZachSaucier, thanks for the answer. For your information I finally managed to fix my issue : I had to add the parenthesis on the ScrollTrigger.update() call. Everything works great now 👍

Hey @ZachSaucier, I added the changes you suggested but my issue is still here. Here's a video of the behavior of my scrollTrigger element (I simply applied it to my image): https://www.dropbox.com/s/0fpux9z4kgci4uw/Enregistrement de l’écran 2021-02-24 à 12.24.48.mov?dl=0 As you can see, it's not an FPS issue, plus my smooth scroll is still fluid. Maybe my ScrollTrigger.update method is not called on every frame ? I tried to call ScrollTrigger.update on my requestAnimationFrame() function to be sure it's called on each frame, but it didn't solve my issue. Do you have any other lead ? Thank you very much

Hey @ZachSaucier, thanks for your answer. Actually I already made it. I made my own smooth scroll with all the classic features for a smooth scroll for example .init(), .destroy(), .resize()... The idea is to only use gsap on my project. I was thinking that if I simply provide the current transformation to my scrollerProxy() method everything should work great. But yeah studying code from existing smooth scrolls looks like a great idea