Jump to content
Search Community

SVG animation only with embed? Not via object?

kenc3dan 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


I have an SVG document loading in an object tag

<object data="maps/mymap.svg" type="image/svg+xml" id="svgObject"></object>


It's showing up fine but I can't seem to get it animating.

I'm using SVGPan on it so it can be panned and zoomed OK.

I try to send a tween command to an element in the SVG and I get nothing. No error, it just sits there.

I know the element is found OK, I can see it in the console.

Thanks for any help, I'm new,


Link to comment
Share on other sites

var df = svgDoc.getElementById("dogface");
TweenLite.to(df, 1.5, {width:400, delay:0.5, onComplete:myFunction});
function myFunction() {
   console.log("tween finished");


Tried this and it indicates the tween is finished but that dogface object sure looks the same to me.

Link to comment
Share on other sites

I'm not much of an SVG guy, so bear with me...


Does your target literally have a "width" property that can be set via JavaScript? In other words, in your example, can you do df.width = 400 and it'll work? Remember, TweenLite is a very flexible, raw animation tool that'll tween any numeric property of any object, but if the object doesn't have that property that's settable via JavaScript, TweenLite won't be able to do much directly. For example, if you need to set the width via an attribute like df.setAttribute("width", 400), then it won't work. However, you could use an onUpdate to apply the values however you want. For example:



//this has nothing to do with SVG - I'm just using a fictitious example that uses getAttribute() and setAttribute()
var proxy = {width:df.getAttribute("width")};
TweenLite.to(proxy, 2, {width:400, onUpdate:function() {
    df.setAttribute("width", proxy.width);

So how do you set the width on your object via JavaScript? Can you provide a very simple example file that we can take a peek at? 

Link to comment
Share on other sites

  • 4 years later...

Helllo, i dont wanto necropost but i'm having the same issue, 
Do i have to embed all the code ? i-m trying with object and the tween dont work with the svg inside the object (but it works with the object tag itself)


Link to comment
Share on other sites

Any chance you can provide a demo? Since the original post WAAAAY back then, we've added AttrPlugin which allows you to set/animate attributes, like:


TweenMax.to(element, 1, {attr:{width:200}});


Does that help at all? Again, if not, please provide a codepen or jsfiddle and we'd be happy to take a peek. 

  • Like 1
Link to comment
Share on other sites

Thanks for the fast support! 

Here-s the code, sorry for give you images but it's faster for me.


I tryed what you post and didn-t work, same with the pluggin. And in the topics i couldn-t get the answer.





Link to comment
Share on other sites

Hi Jivera,


Making images may be easy and fast for you but unfortunately it only delays our ability to help you efficiently.

The time you invest in creating a simple demo will reap the benefits of a speedy response. 

Posting images like this only leads to more follow-up questions that prolong the support process.


I can't tell from the code you posted how, where or if, you tried the solution Blake provided here:



Its a great example of loading an external svg so that you don't have the inline svg code cluttering up your html.

I'm not aware of any reliable techniques of animating the guts of an svg loaded via <object>.

Perhaps this article will be of some help: https://benfrain.com/selecting-svg-inside-tags-with-javascript/

I haven't tried it myself but it might be worth your time.


It also seems you are trying to tween the alpha attribute of a g, maybe you meant opacity? Again, I'm really not sure.



When you find the time to make a reduced demo (no scrollmagic or extra code) please start a new thread.  We will gladly take a look at it.


Thank you.





  • Like 2
Link to comment
Share on other sites

  • Carl locked and unlocked this topic

Just my two cents worth, but that SVG only has 5 paths and a few lines of code. I'd just put that inline and call it done - problem solved. I thought maybe we were talking about hundreds of lines of code here.


That being said, as Carl mentioned, we really need a demo to be of any help - screenshots of code aren't really something we can troubleshoot.



  • Like 1
Link to comment
Share on other sites

I apologize for the images, due to problems of time at work I could not take the time to give them a snippet.

The alpha tween is just an example, anyway I wanted to make a question to you (out of subject) because the other time I used TweenLite and it didn-t animate Opacity element, I do not know why.

But back to the subject, now I will see the link you gave me and prove that. Actually they are many SVG, in this shot I show only one. The developers pointed out to me that its more difficult to work the files with all the code embed.

Thanks for the pattience, really aprecciate it.

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