Jump to content
Creedplay

Problem with Transition (Zoom) effect to SVG path element

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: https://codepen.io/Creedplay/pen/oLRPjY

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.

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
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)? 

Share this post


Link to post
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

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.