Jump to content
Search Community

Problem with Transition (Zoom) effect to SVG path element

Creedplay test
Moderator Tag

Go to solution Solved by Dipscom,

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Hello,

 

I am working with SVG object (Map), I have divided it by regions and now trying to append on-click zoom-in and zoom-out function.

I have decided to make zooming function via changing Transform's "scale" and "translate" properties.

 

Example is here: 

Just check JS lines, and for test click on red object.

 

I have used TweenMax library for transition change of up mentioned properties.

My problem is a visual of transition, the "zoom effect" does not go straight to object, it starts from left and then goes to object. I think reason for it is asynchronous change of "scale" and "translate" properties. but I am not sure how to fix it.

Can anyone explain why it does this? and help me to fix?

I would like to make "zoom effect" to look like this: https://bl.ocks.org/mbostock/9656675

Thanks in advance.

See the Pen oLRPjY by Creedplay (@Creedplay) on CodePen

Link to comment
Share on other sites

  • Solution

Hi Creedplay,

 

Welcome to the forums!

 

Thanks for providing a reduced case example it really helps.

 

For some reason, this particular pen is taking a bit of time to respond for me, it could be your SVG that is a bit complex or it could just be CodePen having a bad hair day.

 

Firstly, in case you are not aware, you don't need to place all the HTML code in your Pen, only the stuff that goes in the <body> tag, CodePen adds the rest. And you can add jQuery and GSAP via the Settings > JavaScript > Quick-add option.

 

I made a fork of your pen and tidied up a bit. I think it is kind of working as you are looking for now. It's a very crude way at the moment but it should get you there.

 

I would have a couple of questions in regards to your setup. Is there a particular reason you were using the attribute plugin to tween the tag attributes of translate and scale? GSAP can handle all of that for you since you are scaling the whole SVG not nested elements. You probably only need the attr plugin when dealing with nested SVGs.

 

Funnily enough I am working on exactly the same thing today, click on an area of an SVG and zoom there. The technique I am going to use is similar to what I have put together for you. 

 

The idea is to scale from the center of the SVG, by setting transformOrigin to "50% 50%" up by X at the same time tweening the x and y to a pre-determined value (exactly what you were doing, really).

 

I've remove the translate attribute from the <g id="layer1"> tag as it was causing the map to jump around when tweening the values. See if you can edit your map so that it does not contain that and you should be good to go.

 

Here's the fork:

 

See the Pen kXKNjo?editors=1010 by dipscom (@dipscom) on CodePen

 

 

Happy Tweening!

  • Like 6
Link to comment
Share on other sites

Thank you very much for your quick and helpful response,

Also thanks for CodePen tips,

I have already updated my previously provided CodePen (just cleared most of path elements, left only 2, and made changes from your example),

I guess my mistake was the missing of that transition properties,

At the moment trying to apply that changes to my main project,

I am just curious and have another question: How are you determining the "X" and "Y" values (in a result, scaled object should be in the center of bounding box)? 

Link to comment
Share on other sites

In my particular case, I have a very specific static point as a focus so, I just tried a few different values until it looked right.

 

If I had to do it dynamically, it probably would involve a bit more math. Something in the lines of defining a boundary box for the area you want to center then, instead of using straight out X and Y values, I'd try xPercent and yPercent ( Check the 2D transforms section here for more info ) as I imagine the ratio should be the same whether you have scaled your graphic or not.

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