Jump to content
Search Community

Transitioning to a set position?

Creek test
Moderator Tag

Recommended Posts

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

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). 

  • Like 2
  • Thanks 1
Link to comment
Share on other sites

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

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.

  • Like 2
Link to comment
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...