charlesb

Hello Mikel ! I don't see any problem with Chrome or Firefox. Animation runs smoothly and there are no twitches

Thank you Zach, your different examples (yours ans Mikel s) helped me to understans the logic I managed to do a quick pen (ugly code) to get the main thing working https://codepen.io/charlesbail_/pen/gOwROoE I quickly understood its limitations and the need to check the difference between values after a certain distance for example. I also need to learn more about "delta" which I'm not familiar with. I will look at some explanations. Thank you for your ressources

Thank you Mikel for this demo ! I'll also work on a way to make the fish follow the cursor, and also change it's orientation. I'll post the result when I'm done ?

Haha I was coming to write to you "don't bother answering I'm watching a video where the guy starts with <<I always feared the (e) at start and wanted to ignore it>> and I feel it's completly like me". Have a nice day !

@ZachSaucierthank you, you are right I should have drawn my solution to see it was pointless. Your topic may help me. I again see that there is something like "mousemove", then (e). Then e.clientX. In this case does it mean that this is the x position of the mouse ? (e being the mouse) In this case, if it's a click event, does the (e) represents the object clicked ? I'll work on this and try to find out with your example. It's a bit hard to jump from examples with different syntaxes. Thank you for your tips

@ZachSaucier thank you for your answer. I'm not at ease with quickSetter since it might be to hard for my level (even if I understand why it's useful). I hope you or someone could help me with a GSAP solution to achieve this scenario : A fish asset follows the mouse position and the fish asset always points toward the mouse. It's a basic effect, I already saw some examples but it sometimes hard to translate from jQuery and I would like to avoid it. I read some articles and Codepen exemples and I think I understood the logic (I already achieved the object following the mouse) : - Calculate the center position of the asset (Can I get the center position? Or I need element.width/2 etc. ?) - Calculate the vector from the center of the asset to the mouse position - math.atan2 magic and convert from radians to degres (But I don't get which values are used ? Is it something like (mouse.x - element.centerX, mouse.y - element.centerY ) ? - Use the variables that results as the rotation Is my scenario correct? I'm a not a big coder and I have notion, I would like to do it the more classic way (no jquery for example). https://codepen.io/charlesbail_/pen/oNzWzov (the code is a non sense and I'm working on it, but just so you know I've started) Also in this file, there is the use of the (e) element. I'm reading some articles related to events but that's a bit of abstraction to me. I'm trying to write it in "plain" javascript even if requires more typing. It's clearer for me. I thank you in advance for your time to help me understand Charles

Hello ! I know this is an old topic but I wonder why we couldn't use GSAP in some way ? Why do we change the css variable ? Like gsap.to(arrow, {x: relX, y: relY, rotation: degree }); and the var degree comes from var degree = (radians * (180 / Math.PI) * -1); (based on your examples) So while the mouse is moving, we calculate the angle, and we animate our arrow so it rotates accordingly ? Wouldn't be possible to use thios approach (even if the code is not good i'm just trying to epxlain) Thanks in advance

Zach thank you for your time. I do learn GSAP typing "GSAP ....." on google to quickly go trough examples and doc but you are right some may be old. I'll focus on the new doc and clean my code. Thanks for the .querySelectorAll(), it indeed fixed everything and I'm happy because I was close to the solution. Charles

Hello everyone ? I'm new to GSAP and to JS. I've been trying to solve this by myself but I'm unable to do it. Thanks in advance for your help and your knowledge. It kind of work but I don't seem to make the stagger work : only on line is animating. Is it related to the way I use querySelector for the .line class ? It looks like only the first line of each section is selected. Note : I'm reading the "common mistakes" article and also looking at example with the use of forEach. Maybe it's better to use event listeners ? The logic would be to play the timeline onEnter ? EDIT: I played with examples I found in the forum (from Zach I think). (I got rid of the scrolling stuff to focus on the stagger). With the Pokemon example I get the same problems. But I know the way I use the querySelector is wrong. But I don't understand. Since I use forEach, shouldn't it select all the .box related each container ? Maybe I need gsap.utils.toArray : forEach Pokemon, create and array and list all the .box https://codepen.io/charlesbail_/pen/gOMjooQ