nightcoder

I found the solution using the getPositionOnPath() method as shown in the docs!!! so cool! here is the codepen link with correction. i did it quickly cause i'm implementing that in a bigger project with nextjs etc... but just to get the idea! hope this will help someone ! happy tweening yall! (oh and if a gsap Jedi has some recommandations and stuff or a better approach, please let me know. as i said i implemented it in a react18 component and i use useState and isoMorphicLayoutEffect to keep track of all the values returned along the way etc... and it works smoothly sofar) codepen with solution

yes i see what you mean.. that's why i said i found those coordinates manually by trying/missing/trying again until it was on the circle. what i want to achieve in theory is: 1- i have a circle 2- i want to place a dot (or several dots) along the path of the circle (=start position of the dot for its animation) 3- animate the dot(s) from their start position on the circle. For now i only know how to use a value between 0 and 1 (or in a range of 1, like 0.4 - 1.4 or -0.25 - 0.75 like you said). I would like to be able to place the white dot wherever i want on the circle path (using the white dot's cx and cy coordinates i think? but maybe not a good idea i'm not sure) and then make that very specific position the "start" of the motionPath animation for the dot. Hence my question: is there a method to convert coordinates into a value between 0-1... I will see what i can do with getPositionOnPath() method. And thank you for taking the time to reply to me!

thank you! i saw the typo and fixed it but thank you! but the question remains : how can i convert the cx and cy coordinates of the white dot to a value between 0-1 to make it the start of the animation along the circle path? What is the best approach to achieve that?

yeah i just fixed it! the pen is now working. sorry for that ? so i know about start and end etc... the question is : how to convert cx and cy to have the white dot start at that point on the circle?

hello there! i'm trying to achieve something simple but i don't how to. I would like the white dot to start its course at its cx and cy coordinates. But the thing is that start and end take a value between 0 and 1 with 0 being the beginning and 1 end of the path. So how can i convert my cx and cy coordinates to a value between 0-1 to make it the start of the animation along the circle path? What is the best approach to achieve that? Also, i chose cx and cy of the white dot manually/visually but is there a motionPathPlugin method that would allow me to get x and y coordinates on the circle? so i would choose in that range and not play around with numbers manually like that. I saw there are many interesting motionPathPlugin methods but what would be the best approach here? The end goal is to position my dot wherever i want on the circle and then animate it from that point. Thank you for your help! codepen is attached (tween is paused so you can see the white dot starting point i want for now)

i finally found the solution and totally forgot to come back here to give some news! So indeed ScrollTrigger works like a charm with webpack, no problem at all. The issue came from my webpack.config.js file and the way i used to bundle my scss files! All is fixed now that the scss files are bundled nicely, no more weird behaviour of ScrollTrigger. Moral of the story: webpack can be quite confusing when using it for the first time! But really good way to learn more and make progress! Cheers to you all and thank you Jack and Zach for replying to me so fast when i first posted!

Thank you so much for replying so fast!!! Yes indeed i should definitely break the project down in smaller pieces and find the issue that way. It's also helpful to know that there isn't anything special to do when using gsap with webpack! So it might come from my webpack config or somehting like that... I'll be my own expert freelance consultant LOL (since i want to become a developer, it's part of the learning journey isn't it?) and i'll investigate further! I'll post a github link if i'm still stuck in a few days, or the solution to my problem once i solve it! thanks again for your kind reply! cheers

Hello!! I have a quite heavy question I'm working on my portfolio website using ScrollTrigger / horizontal scrolling. Everything was working absolutely fine until i installed webpack in the project recently. I needed to install it because i also use barba.js for transitions and webpack makes it so easier to handle the scss from page to page when clicking a link to go to another page of the site (no need to code for stylesheet injection in the head tag of the new html page when a link is clicked). And indeed it's working! BUT very oddly, when starting the project, now i do not land at the top of the page but somewhere in the middle and it's impossible to scroll! ScrollTrigger seems to be the issue here, because the barba transitions are working fine... What happens is: when landing on the page, i see a short flash of the raw html starting from the top (cool) and then (when the JS file is loaded) i get to a certain portion of the website, depending on the xPercent i put in my horizontal-scrolling function...(xPercent: -100 gets me at the 1st section, -200 at the second, -300 at the middle of the site etc... and impossible to scroll.) I tried everything and cannot figure out why/how to fix this. Would you have an idea why this is happening? Any help/hint/link would be highly appreciated! i learned a lot from this forum sofar, maybe my case can help someone else in the future ^^ Thank you! ps: my html and js files are very long, i hope i'm not too much of a hassle... ps2: here is a link to a tweet i posted in december where you can see the scrolltrigger/horizontal scrolling working smoothly in the project. (https://twitter.com/Nightcoder2/status/1333666647429816320)