Michael31

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