Jump to content
Search Community

Animate viewport on svg object

Lincoln test
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

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.

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