Jump to content


Animate viewport on svg object

Moderator Tag

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

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',
Link to comment
Share on other sites

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

  • Like 3
Link to comment
Share on other sites

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




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.

  • Like 4
Link to comment
Share on other sites

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

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.