Michaël Garcia

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!

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

Hi, I made my own smooth scroll which basically changes the transform:translateY value of my element. I wanted to plug it with ScrollTrigger so I used the ScrollTrigger.scrollerProxy() function. Eventually, my animation is connected to my smooth scroll. Unfortunately, as you can see on my CodePen bellow, the animation made with ScrollTrigger is not smooth at all. I event tried to call the ScrollTrigger.update method to fix this but it doesn't change anything. https://codepen.io/michaelgrc/pen/WNoZLPM Does anyone see what I'm missing ? Thanks a lot !

Hey @mikel, This last tip did the trick ! Thanks a lot for your time.

Hey @elegantseagulls, thanks for your answer. So I added this attribute but it seems to add a new issue on both my codePen (you can see it right above) and my project. It adds an extra height at the end of my page. When I inspect it, it seems to be the section set inside the trigger attribute. Do I miss something ? Thanks a lot

Hello, I'd like to reproduce a css sticky behavior. Unfortunately as you can see on my codePen, it doesn't keep pinned until the end of my section despite the end attribute. https://codepen.io/michaelgrc/pen/bGBEdRZ Does anyone see what I'm missing ? Thanks a lot

Hello @akapowl, thank you very much. Your explanations help a lot.

Thanks for your answers. I tried to combine the scrub and the toggleActions properties but I can't make it work. Does toggleActions can work when scrub is activated ? So I finally chose to use two ScrollTriggers. But eventually it jumps when the second transition plays : https://codepen.io/michaelgrc/pen/GRNJGYb Does anyone see what I'm missing ?

Hello, I gradually change the background color of my viewport when an element appears. I would like to gradually go back to the normal when this same element disappears from the viewport if you're keep scrolling. Is is possible to do so inside the same scrollTrigger object ? I tried to do the exit animation with another gsap.to() but it jumped. Thanks you very much https://codepen.io/michaelgrc/pen/GRNJGYb

Thanks you guys for the amazing support !