Jump to content
GreenSock

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

How to Zoom & Center to an element in SVG

Recommended Posts

I need help trying to scale and center to a certain element within an svg.  I am using jquery.ui.layout, tweenmax and draggable.

 

I use getBBox() to get the group element's location in the svg file, and then use the values here:  TweenLite.to(svgness, 1.5,  scaleX: 3,  scaleY: 3,     svgOrigin: x + " " + y  });

 

It sort of works, but then the element is not really centered in the window.

See the Pen LGBGEj by AlmaTheYounger (@AlmaTheYounger) on CodePen

  • Like 1
Link to post
Share on other sites

Hi qualityCode  :),

 

Welcome to the forums. 

 

Have you tried animating the viewBox instead of scaling? I made a pen a while back that did just that. IMHO it might just make your life a lot easier.

 

Take a look - maybe it can help you a bit:

See the Pen XbqBmM by PointC (@PointC) on CodePen

 

Happy tweening. 

 

:)

  • Like 6
Link to post
Share on other sites

Hi qualityCode  :),

 

Welcome to the forums. 

 

Have you tried animating the viewBox instead of scaling? I made a pen a while back that did just that. IMHO it might just make your life a lot easier.

 

Take a look - maybe it can help you a bit:

See the Pen XbqBmM by PointC (@PointC) on CodePen

 

Happy tweening. 

 

:)

Hi again, when I animate the viewbox, then drag, the content outside the new viewbox is missing.  Is there any way to see it?  Here is my codepen:

http://s.codepen.io/AlmaTheYounger/debug/LGBGEj

Thank you.

Link to post
Share on other sites

Maybe try adding this CSS: 

#theSVG {
  overflow: visible;
}

Is that what you're looking for?

 

or maybe wrap it in a <g> or even another <svg> and make the inner one draggable instead of the whole (outer) container. 

  • Like 3
Link to post
Share on other sites

PointC, would your viewBox animation effect be able to be applied to an item inside a Canvas object created with Adobe Animate CC? If so, could you give some direction as to how? Thanks!!

 

On 2/1/2016 at 6:07 PM, PointC said:

Hi qualityCode  :),

 

Welcome to the forums. 

 

Have you tried animating the viewBox instead of scaling? I made a pen a while back that did just that. IMHO it might just make your life a lot easier.

 

Take a look - maybe it can help you a bit:

See the Pen XbqBmM by PointC (@PointC) on CodePen

 

Happy tweening. 

 

:)

Link to post
Share on other sites

Hi Sabrid,

 

Nothing that PointC's viewBox technique can really be applied to canvas as there is no viewBox or anything quite like it.

 

You might want to look into Snap.svg Animator which allows you to export svg animations and art from Animate CC

 

https://exchange.adobe.com/addons/products/12329#.WpghkhMbMUE

 

There is also a video by CJGammon that shows a bit how it works out there as well.

 

Once you export your Animate CC work as SVG then you will probably have some success animating the viewBox.

I've never used Snap.svg Animator and it has nothing to do with GreenSock so we don't offer any support on how to set it up and use it but the github repo should have good instructions to get you started.

  • Like 3
Link to post
Share on other sites

Yeah - as @Carl mentioned, there isn't a viewBox for canvas. You can certainly zoom and pan all around canvas if you want though.

 

A quick search on CodePen shows a few results. Maybe they'll give you some ideas too.

See the Pen by search (@search) on CodePen

 

Happy tweening.

:)

 

  • Like 3
Link to post
Share on other sites

Thank you both for your quick replies. 

 

I'm afraid I need to retain the complex structure and interactivity of the content exported by Animate CC, so converting it to an svg would not be ideal. Previous searches had already turned up many of the examples you have linked to, but I liked the look and motion of your solution the best. Is there any relatively simple way to pan and zoom to a specific target rectangle within the canvas element using GSAP? I am an actionscript refugee and trying to figure out how to duplicate some of my previous functionality in this new and foreign land :?

Link to post
Share on other sites

Hi @sabird

 

There's nothing special about a view box. It describes what part of the canvas should be visible. Without getting into aspect ratios and the viewport, a view box in canvas could be as simple as this.

 

var viewBox = {
  x: 0,
  y: 0,
  width: 1000,
  height: 1000
};

context.scale(canvas.width / viewBox.width, canvas.height / viewBox.height);
context.translate(-viewBox.x, -viewBox.y);

 

 

The same animation used in @PointC 's demo.

 

See the Pen gvEvaP by osublake (@osublake) on CodePen

 

 

I'm not familiar with AnimateCC, but I know you can do something similar to that using some type of container. If you need help, try to make a simple Create/EaselJS demo on CodePen.

 

  • Like 5
Link to post
Share on other sites

Ha! I knew @OSUblake would be pulled into this thread. I think he has a 6th sense when the word canvas is mentioned in a topic. ;)

  • Like 1
  • Haha 3
Link to post
Share on other sites

@PointC what happens when someone holds candle in dark, in front of mirror and whispers canvas three times?

  • Haha 3
Link to post
Share on other sites
On 3/2/2018 at 10:38 AM, PointC said:

Ha! I knew @OSUblake would be pulled into this thread. I think he has a 6th sense when the word canvas is mentioned in a topic. ;)

 

Yup. Email filters. ;-)

 

Canvas related questions are always more interesting to me.

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

×