Michaël Garcia

Hello, I'm using the quickSetter method inside es6 classes. Unfortunately I have an error : elmtSet is not a function Does anyone knows how to use the quickSetter method with the this nomenclature ? I'm force to separate a function from my ticker because I plan to kill it later. Thanks init () { this.elmtSet = gsap.quickSetter(".elmt", "y", "px"); gsap.ticker.add(tickerFunction); } tickerFunction() { // some things with delta and stuffs and then : this.elmtSet(myValue); }

Hey @ZachSaucier, Thanks again for your time. Yes I'm referring on what happen a the 4th second and later. I think I was scrolling at this moment but I tried it again and it happens sometimes when I'm not scrolling. It sounds like a detail but I would love to have something smooth at 100% ? Thanks

I recorded this little video to show you : https://www.dropbox.com/s/tnl1gkgx2g52zwu/Enregistrement de l’écran 2021-01-27 à 17.18.30.mov?dl=0 I'm not sure where to look, that's my issue Would you have done this effect the same way ? Thanks

Hey @ZachSaucier, thanks for your answer. This idea is to have a smooth movement depending on the wheel event intensity. The faster you scroll, the more your element is moving away from the center I manage to create a jump on my trackpad if I scroll fast in one direction and then scroll fast several time in the other direction. This jump doesn't seems to appear with the rAF() method, the movement is always smooth. Thank you

Hey @elegantseagulls, thanks for your answer. This is the example I saw on the doc. I learned a lot. But in the doc's example, it depends initially on a position. Now, I try to do the same using a delta on a wheel event. This is how I do it using a rAF(): https://codepen.io/michaelgrc/pen/zYKggMj And now, this is how I wrote it using quickSetter and the gsap's ticker : I want to be sure I didn't make any mistakes on my code. I'm not sure I'm supposed to use the incrementation on line 23 and 24. Plus it seems to jump sometimes. Do I miss something ? https://codepen.io/michaelgrc/pen/bGBbbRr Thank you very much guys for the help.

Hi @elegantseagulls, @GreenSock Thank you very much for your answers, Since there's a lot of digits to change in the DOM when tweening (for example style="transform:translateX(0.23462456px)"), I though it could impact the global performance of the website... But this was a wrong track. The gsap.quickSetter() function seems to exactly fit my needs. It looks pretty awesone ! I just made a CodePen to illustrate how I usually work with GSAP in the case of a moving cursor : https://codepen.io/michaelgrc/pen/xxEvpOW As you can see, I was using a requestAnimationFrame() to have a cool ease on the movement. But this method means that there are a lot of tween playing every time on my website. I'm tweening a lot of objets with that same method to have cool eases with some deltas values (like a mousemouse or a scroll event) Do you think it's a bad way to proceed ? If using gsap.quickSetter() allows me to have the exactly same result without using a requestAnimationFrame() function, I should use it to improve the performance of my website.

Hello, I've noticed that when a tween value is updating, it has a lot of decimals. Since I'm using this tween inside a requestAnimationFrame function, I'd like to improve its performance. I saw the snap parameter but I've been wondering if there's a proper way to ask my tween to return less decimals during the update ? Also, does the snap parameter affect the performance of a tween ? Thank you very much

@GreenSock, @ZachSaucier thanks a lot. Your answers were very useful !

I imported gsap on my project. It works fine but as soon as I specify an ease, I've an error : How can I properly import the specific ease file ? Thanks a lot import gsap from "gsap"; gsap.to('#cursor', {duration:0.2, x:"10px", y:"10px", ease:Power2.easeInOut});

Hi everybody, for now, I'm using the requestAnimationFrame function. Is this way the most optimized way ? It looks like this way use a lot of the browser ressources. Thank you var currentMousePos = { x: 0, y: 0 }, mousePos = { x : 0}, myvar; document.addEventListener("mousemove", function(event){ currentMousePos.x = event.pageX; currentMousePos.y = event.pageY; }); function raf() { my_raf = requestAnimationFrame(raf); mouse.x = myvar; TweenMax.to(mousePos, 0.3, { x: currentMousePos.x, onUpdate: function () { myvar = mousePos.x; }, ease: Linear.easeNone }); }