SVG animation only with embed? Not via object?

[kenc3dan]

Hi,

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,

Ken

[kenc3dan]

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.

[GreenSock]

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? 

[jjvera]

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)

cheersss

[GreenSock]

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. 

[PointC]

If you're referring to inline SVG code, you could also take a look at these threads as they show ways of injecting the SVG.

 

Happy tweening.

[jjvera]

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.

 

[Carl]

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:

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

 

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.

 

 

 

 

[PointC]

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.

 

Thanks.

[jjvera]

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.