Xenex122

If you don't want to animated it by reversing demoTL.reverse(-1);

If you mean centering the compromise of your target you should do it in this way const span = document.querySelector('.target'); var rect = span.getBoundingClientRect(); var rectParent = span.parentElement.getBoundingClientRect() const offsetLeft = rect.left - rectParent.left - 10; const offsetRight = rect.right - rectParent.left - 5; const offsetTop = rect.top - rectParent.top; const offsetBottom = rect.top - rectParent.top + rect.height; This now will center your responsive target...where did I get the '-10' and '-5'? it based on your arrows and borders. Just copy this and change it or see for my codepen https://codepen.io/myth-vince/pen/RwQeWmV

Can you provide a simpler example? I wanna help before I sleep hahha.

Yes all inside the self functions...cause I believe there is something more than self.getVelocity right?

I see but..onUpdate function there is a lot of self function call right like? rather than self.getVelocity() is there anything related on it? I don't find anything here in the docs or other things that can be used in self.function callbacks. ???

hahahaha...to be honest yes..I'm finding a way to do it without using it hahaha..

No, why did you change it in the last line of codes..I only talk about the top of your codes in which is before the scrollTl.

@Cassie I'm almost close to it but there is something wrong here..Instead of the stroke-text should be the one moving..The main text is the one moving..Look at this https://codepen.io/myth-vince/pen/MWQPgOo Do I have something to add here ? or what? let Velocity = gsap.quickTo(layer,"y") Update Its kinda work fine for me now onUpdate: self => { // const velocity = velocity*2 console.log(self.getVelocity()); // console.log(velocity*2) velocity = (self.getVelocity() / -25) * speed Velocity(velocity) }, this works fine now @Cassie thanks.

Oh this really looks hard...

@samlinck I believe this is what you are looking for? https://codepen.io/myth-vince/pen/abqRzaJ tl.add('start') .to('#dotLeft', {duration: 1, x: 32}, 'start') .to('#dotRight', {duration: 1, x: -32 }, 'start') }); }; just change the #dotRight into "x:-32" so it won't back in initial position..xPercent and x has different roles.

@heavylifting A greenshock give me a piece advice that instead of using cssrule just pass a global variable..I think this one might help you..I don't know much about what you are talking about bounce in the end but change your cssrule into global variable https://codepen.io/myth-vince/pen/VwQEYpz

Oh I see I've updated it now but I can't pass my const "velocity" inside of it. I want to increase the amount of "velocity" not the getVelocity() that you are talking about. I've updated it in the below of scrub onUpdate: self => { const velocity = velocity*2 console.log(velocity*2) } https://codepen.io/myth-vince/pen/MWQPgOo?editors=1111 and it giving an error in console like EDIT: I also try getVelocity but I can't pass it to the "velocity" const. velocity = self.getVelocity() EDIT 2: Oh nevermind I should put it as "let velocity" not "const velocity" my bad..don't mind me I got it.

My explanation is same as the title...Can I increase my data-motion whenever I'm scrolling down in the screen and also get its new value of "motion" as it keeps scrolling up or down scrub: function s(e) { velocity = velocity * 2 // This doesnt console.log the velocity. console.log(velocity) return speed/2 }, You can see it here in the javascript part..the scrub is working though but I can't console.log out the velocity or change the data-motion to "velocity".. What I mean here while I'm scrolling I'm supposed to get some value in the console either scrolling Up or Down.

Oh nevermind I got it sorry let yDif = e.clientY - rect.height, xDif = e.clientX - rect.width; I just have to something like this.

From the earlier question sir.. How do I do it if its inside the box or something? I have a new codepen here that can you make clarify on it. https://codepen.io/myth-vince/pen/xxYaNGp As you see I change a bit the "x,y" with a var rect = box.getBoundingClientRect() const x_ = e.clientX - rect.x; const y_ = e.clientY - rect.y; let yDif = y_, xDif = x_ because the arrow is not following the mouse direction in your earlier code cause it only works in a parentDiv...but my function here is almostly work but there is something wrong where it doesn't fully rotate on the top left side of the arrow. Can you notice my mistake her sir? I believe the missing thing here must be something in if (Math.abs(xDif) > 3 || Math.abs(yDif) > 3) { console.log(xDif,yDif) x = x_; y = y_; // This one will rotate the '.rotate' while the cursor is moving // _short is used for make rotation is n right rotation. rotateTween.vars.rotation = (Math.atan2(yDif, xDif) * RAD2DEG - 40) + "_short"; // This one will restart the method rotation so it can rotate again once the mouse // is move rotateTween.invalidate().restart(); }

hahaha.. well just might to do some new trick in it..

Can I ask if the quickTo is somehow related to mousevent? because when I try to change it into .to() it doesn't move.

oh I see thanks sir..I never thought this is the solution.

My problem here is I don't know how can I make the arrow follow as the direction of mouse as I passed it through my root variable. Any idea how can I achieve this? It just keeps rotating and rotating when I'm trying to move it around the screen. Example if it goes like 30deg of the direction of the mouse then it the arrow should be there also. since it has 360deg I don't know how to do it and pass it in global variable.

uh @SteveS how can I do it if there is a body like this body { width:100%; height:100vh; display:flex; align-items:center; justify-content:center; } CAuse I want to center it but it the animation clipper is just teleporting suddenly when I try to hover the image. https://codepen.io/myth-vince/pen/eYVLJYm I also updated the javascript you do..instead of e.target.BoudingClientRect() I did something like this cause I want to avoid bugs overlap.addEventListener("mousemove", (e) => { var rect = overlap.getBoundingClientRect() gsap.set(clipper, { width: rect.width - (rect.width - e.clientX) }) }) But now the only problem is when I center it or relocate it in any position of my screen..It does have kinda have a bug. When it is in the large screen it just teleported to right but if its small its seems normal. Nevermind I already got my answer. Thanks buddy!!!

I know this is unrelated to gsap but I feel people a lot know of javascript here so I hope you guys can help. The following idea that I tried is this https://codepen.io/tutsplus/pen/bWKMoK As you can see in my title it means the screen is half split..I was almost close to it...But I can't achieve the "width" and the "left" maybe in this around of the field. This is the my own understand of it. It shouldn't collapse and it must only in the center of screen...as same the original of idea of codepen https://codepen.io/myth-vince/pen/gOvdaLm I know this is unrelated in gsap but since there is a lot of advance animator here and stackoverflow can't help me through this so I hope someone can get me through this.

damn at first part I didn't notice it..So it supposed to have a parent when the pinspacer is null.. I see thanks.

I've got an issue with a one file. So basically I have separated files for able to call the file The issue I am getting is something like this Uncaught DOMException: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node. You can see it in here in the line of {NAME == "Spy" ? <> <Spyxfamily></Spyxfamily> </> : <></>} {NAME == "Slime" ? <> <Slime></Slime> </> : <></>} {NAME == "Darling" ? <> <Franxx></Franxx> </> : <></>} {NAME == "Onepiece" ? <> <Onepiece></Onepiece> </> : <></>} {NAME == "redo" ? <> <Healer></Healer> </> : <></>} {NAME == "dragon" ? <> <Dragonball></Dragonball> </> : <></>} {NAME == "naruto" ? <> <Naruto></Naruto> </> : <></>} The part in Healer is where I am getting the error. So in this part I will show my CODESANDBOX https://codesandbox.io/s/cool-robinson-ep6oj4?file=/src/index.js to briefly explain it. I'll try to make it shorter. So basically go in the Introduction.jsx and the first code snippet you can find it in the code 205 lines If you try to choose/click other options you can clearly tell that nothings happening except the Healer.jsx ( after clicking this option try to click again the navbar button) file and I don't know why it is like that. When you try to remove/comment out the whole useEffect() function of the Healer.jsx it can shows that nothing error will happen. The navbar options button is at the top right side of screen. I can't show the full codes but I can only show the parts. Anyone can help me here? I don't understand why it giving me an error even though the codes is quite clear for me. UPDATE : Anyway I find the issue that the pin make this causes..If I set it true, it will affect the DOM Node but if not nothings will happen.

Nevermind I already got the solution gsap.registerPlugin(ScrollTrigger) const back = document.querySelector('.back') console.log(back.clientHeight*10) const all = document.querySelectorAll('.items') const list = [ {x:"10%",y:"20%"}, {x:"30%",y:"30%"}, {x:"20%",y:"60%"}, {x:"40%",y:"80%"}, {x:"60%",y:"20%"}, {x:"85%",y:"80%"}, {x:"60%",y:"60%"}, {x:"80%",y:"80%"} ] var timeline = gsap.timeline({ scrollTrigger:{ trigger:back, start:"top top", end:"center top", end:() => `${back.clientHeight*10}px`, scrub:true, pin:true, markers:true, toggleActions:"play reverse play reverse" } }) all.forEach((elem,i) => { // console.log(list[i].x,list[i].y) timeline.to(elem,{ top:`${list[i].y}`, left:`${list[i].x}`, ease:"none", },0) }) Just put the thing like this and remove the for loop in the SCSS just copy my own list.

So basically the problem here is simple but I don't know how to it..Basically like this...Every box is on the center and as I scroll down they will be separated each other as I keep scrolling down.. The sample idea is in my codepen..As they were separated..but I want them to be in center and go there specific locations as I scroll-down. How can I achieve this? Thanks for the help.