Animate viewport on svg object

[Lincoln 0 Likes (Newbie)]

Hi there.

 

I have just started using GSAP and want to animate the viewport attribute of the SVG inside a Object tag. This is the code I have but doesn't seem to work.

 

var tl = new TimelineMax({delay:.5}),
    svgDoc = document.getElementById("SVGobject").contentDocument;
	TweenMax.set(svgDoc,{attr:{viewBox:"250 0 250 250"}});
	tl.to(svgDoc, 1.5, {attr:{ viewBox:"0 0 1000 1000"}});

Once i have this working the ultimate aim is to trigger an animation of the viewport via an onClick event.

Currently I just change the viewport via an array, so any help on this bit too would be very much appreciated.

var interactions = {
  'Button1' : '414 0 414 736',
  'Button2' : '214 0 414 736',
  'Button3' : '0 0 414 736',
  'Button4' : '828 0 414 736',
}; 

[Dipscom 3,373 Likes (Superhero)]

HI Lincoln,

 

Here's a Pen created by PointC that animates the viewBox element - that should give you the answers you need:

 

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

 

And here is another one that he has made that has a click event:

 

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

[Carl 11,323 Likes (Superhero)]

the short story: this is viewBox animation working with <object> svg

http://plnkr.co/edit/W0zLlue1vZISjpAVqy5t?p=preview

 

 

The long story: http://greensock.com/forums/topic/11187-accessing-svg-paths-in-external-file/

My demo above is a fork of Blake's that uses a bit of Diaco's stuff. 

 

From what I can tell using <object> opens you up to some cross-domain hassles and extra work accessing the guts of the SVG. I'd vote for using Blake's ajax approach if inline isn't an option.

[Lincoln 0 Likes (Newbie)]

Thanks all for the responses. These links were very helpful and have no worked it out.