Creek Posted September 27, 2021 Share Posted September 27, 2021 I'm dealing with multiple expressions - as the eye changes shape, rather than moving an xPercent and yPercent to "get" where I want the pupil to be - Can I instead set the "end position" and direct a move to that position - relative to the SVG, so that it remains responsive? If I sound like I'm spouting garbage - if I'm going from expression 1 to 2 to 3 to 4 - then everything's fine obviously. I can play around with xPercent and yPercent to find what those values need to be. But, if on click or for whatever reason, expression 2 is required, then I don't have a clear xPercent and yPercent movement to "get there" - I don't think - because I can't know the starting position? See the Pen xxrQOEN by tibbeecode (@tibbeecode) on CodePen Link to comment Share on other sites More sharing options...
elegantseagulls Posted September 27, 2021 Share Posted September 27, 2021 Why not just use absolute values (example: x: 10)? Since it's using the SVG coordinate system, it should remain responsive as the SVG resizes. 1 1 Link to comment Share on other sites More sharing options...
GreenSock Posted September 27, 2021 Share Posted September 27, 2021 I don't really understand your question. xPercent and yPercent just move by a percentage of the width/height from the native position. It kinda sounds like you assumed they would be moving a percentage from wherever they happen to be at that moment you start the tween, but that's not true. In other words, if you animate to xPercent: 50 and then you animate to xPercent: 60, it will only move 10% of the element's width to the right (from 50 to 60). 2 1 Link to comment Share on other sites More sharing options...
elegantseagulls Posted September 27, 2021 Share Posted September 27, 2021 Are you having trouble implementing this? Or were you just theorizing? Link to comment Share on other sites More sharing options...
Creek Posted September 28, 2021 Author Share Posted September 28, 2021 15 minutes ago, elegantseagulls said: Are you having trouble implementing this? Or were you just theorizing? Theorizing? But I also had no idea what xPercent and yPercent actually did. I was just changing the numbers until I got the end result I wanted But I wrongly thought that each path had its own position, and I was moving relative to that position - I didn't understand that those percents were actually relative to the SVG as a whole, so they don't have anything to do with the starting positions. Sorry for asking so many stupid questions - but, not kissing up, I'm always amazed how SIMPLE the solution is to what logically seems like a nightmare to me In my mind, xPercent and yPercent were just fancier versions of x and y pixel movements "set up" to "cope" with relative positioning. Very glad to know that, regardless of where anything is, those values actually specify a "set" yet "relative" position WITHIN the parent SVG Link to comment Share on other sites More sharing options...
Cassie Posted September 28, 2021 Share Posted September 28, 2021 Not quite. As Jack said - xPercent and yPercent will move by a percentage of that element's width/height - from that elements starting position. 9 hours ago, GreenSock said: In other words, if you animate to xPercent: 50 and then you animate to xPercent: 60, it will only move 10% of the element's width to the right (from 50 to 60). There's no pixel values or relative positioning in SVG either. 2 Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now