Jump to content
Search Community

How to Zoom & Center to an element in SVG

qualityCode test
Moderator Tag

Go to solution Solved by GreenSock,

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

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 comment
Share on other sites

  • 2 weeks later...

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 comment
Share on other sites

  • 2 years later...

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