Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
swampthang

Screen Coordinates in Scaled Container

Recommended Posts

I'm trying to figure out how to calculate the x position for a g element that would animate in from just "Off-Stage" (right, left, top, bottom) in an embedded SVG that is inside a div container which is scaled. When you change the container's scale setting (zoom) everything changes. 

 

Also, the original SVG was 640 x 640 but I resized it to 186 x 186 in this example which adds to the confusion for my feeble noggin. The reason for all these differences is a user can zoom the stage container in and out as well as resize the embedded SVG so I need to accommodate those changes.

 

Anyone have any idea how to get this to work?

See the Pen qBZrRGO?editors=1010 by swampthang (@swampthang) on CodePen

Link to post
Share on other sites

Hey swampthang. I'm not sure exactly what your goal is based on your code, but this is definitely a situation where you want to use MotionPathPlugin's capabilities. .getRelativePosition(), .getGlobalPosition(), .convertCoordinates(), and .getAlignMatrix()  make this sort of thing much easier. You likely won't need all of them but I'm not sure of your goal so it's hard to help more tangibly at the moment.

  • Like 1
Link to post
Share on other sites

Thanks for the reply, @ZachSaucier. I'm trying to animate the g element from just outside the stage area on the right (the dashed lines) to its current position. Then animate it to just outside the stage area on the left. In my app, I'm stuck (at this time anyway) with < version 3 so can't really leverage those methods.

Link to post
Share on other sites

This thread from a couple years ago may help.

 

 

  • Like 1
Link to post
Share on other sites
32 minutes ago, swampthang said:

In my app, I'm stuck (at this time anyway) with < version 3 so can't really leverage those methods.

What a shame! They would save you a ton of time. Best of luck with your implementation, it's a tough subject.

Link to post
Share on other sites
1 hour ago, swampthang said:

I'm stuck (at this time anyway) with < version 3 so can't really leverage those methods.

Come on... use GSAP 3.

 

giphy.gif

  • Haha 2
Link to post
Share on other sites

I was making this way more complicated than it should have been. The issue was the width and height relative to the viewBox. For now, this works:

 

See the Pen mdPWXwv?editors=1010 by swampthang (@swampthang) on CodePen

  • Like 2
Link to post
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.

×