Jump to content
GreenSock

celli

SVG Plugin with Edge Animate

Go to solution Solved by Carl,

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

This might be a tough question !

 

First off, the SVG plugin is really AMAZING!!!

 

I can't make a codePen, because I am experimenting with combining using Edge Animate and GSAP. Edge Animate seems to export a .js file that handles all CSS and javascript together in one crazy file; and if I use Greensock inside of Edge, which I can easily do, but all of that code also gets swallowed up into one .js file from Edge, which is quite annoying and not efficient for editing code outside of edge.

 

Putting GSAP code into Edge is simple, so I add something like this snippet below.

var tl = new TimelineLite();

tl.from(".chinese-letter", 1, {drawSVG:0, opacity:0, ease:Power1.easeInOut})

And Edge recognizes the 'opacity' and we can see that property animate (so Greensock is working inside of edge), but it ignores the SVG. It looks like if I inspect the HTML in a browser I can see that the SVG which is imported into Edge as an actual .svg file, is treated as a div with a background image, even though it is scaleable and vector in the browser. The CSS has this property: background-image: url(images/letters.svg);

 

So it makes it very hard to target a <line>, <path>, or <polyline> from inside of the SVG like we would do normally, and the way the examples found on Greensock.

 

Normally I wouldn't use Edge Animate and I would do this purely with GSAP, but I am experimenting with different ways, and mixing some of those ways together -- and since I have recently encountered clients actually asking for Edge files I was trying to see if I could make this work -- The question is, Is there a way to get the SVG plugin to work through Edge if the SVG element is simply a div with a background-image property ?

 

This might be a silly question, but maybe someone has experience with this, and can lead me in the right direction..

 

Link to comment
Share on other sites

Hi celli  :)

 

Unfortunately adobe edge animate can't select svg child tag ( pasted or imported svg as image ) , you can make a div/symbol and append svg code in that ; something like this :

sym.$('yoursymbol').append("<svg ............</svg>");

and then tween your svg easily same as usual , something like this  :

sym.$('Stage').append('<svg version="1.1" baseProfile="tiny" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"'+
'x="0px" y="0px" width="570px" height="150px" viewBox="0 0 570 150" xml:space="preserve">'+
'<circle fill="none" cx="71.5" cy="77.5" r="51.5" stroke="#88CE02" stroke-width="4"/>'+
'<ellipse fill="none" stroke="#88CE02" stroke-width="4" stroke-miterlimit="10" cx="241.4" cy="77.5" rx="78.9" ry="51.5"/>'+
'<rect x="354" y="26" fill="none" stroke="#88CE02" stroke-width="4" stroke-miterlimit="30" width="103" height="103" id="rect" />'+
'<polyline fill="none" stroke="#88CE02" stroke-width="4" stroke-miterlimit="10" points="536.1,129 487.3,74.2 536.1,26 "/>'+
'</svg>')

var shapes = $("rect, circle, ellipse, polyline"),
tl = new TimelineMax({ repeat:10, yoyo:true});

tl.staggerFromTo(shapes, 1, {drawSVG:"100%"}, {drawSVG:"50% 50%"}, 0.1)
  .fromTo(shapes, 0.1, {drawSVG:"0%"}, {drawSVG:"10%", immediateRender:false}, "+=0.1")
  .staggerTo(shapes, 1, {drawSVG:"90% 100%"}, 0.5)
  .to(shapes, 1, {rotation:360, scale:0.5, drawSVG:"100%", stroke:"white", strokeWidth:6, transformOrigin:"50% 50%"})
  .staggerTo(shapes, 0.5, {stroke:"red", scale:1.5, opacity:0}, 0.2)

actually above code works same as this codepen demo : 

See the Pen qEdoRE by GreenSock (@GreenSock) on CodePen

Link to comment
Share on other sites

Interesting suggestion, Diaco. 

 

For the record, I think part of the problem is that browsers won't grant read/write access to the contents of an SVG that's used as the src of an <img>. It gets treated like an image instead of a bunch of DOM nodes like "normal" inline SVG. See what I mean? Diaco's suggestion gets around that - he's just giving you a way to inject it in a way that's not segregated by the browser. You may be able to AJAX it in there too, loading the .svg file and injecting it that way (although I haven't tried that - just a guess/theory/curiosity). 

  • Like 1
Link to comment
Share on other sites

yep , as Jack supreme suggestion , that's would be better to load via AJAX and append that in div/symbol :

 

something like this :

sym.$('Stage').load('SVG.svg', function() {
TweenMax.from(".chinese-letter", 2, { drawSVG:0, opacity:0, ease:Power1.easeInOut });
});
Link to comment
Share on other sites

very interesting guys, I'm glad I asked!

 

I was also thinking of just running a GSAP timeline side-by-side with the Edge Animation, and injecting those SVG pieces into the HTML, and controlling and timing them up with GSAP from a seperate .js file

Link to comment
Share on other sites

I actually just stumbled upon this

http://www.edgedocks.com/edgecommons#anchor_edgecommons_17

 

It says is is able to do this: Currently Edge Animate only supports SVG files within <img> tags or as background images in <div> containers. So you can neither listen for SVG events nor reach into the SVG structure to e.g. change the color of a shape. With the "interactive SVG" feature provided by Edge Commons you can enable on this. And the great thins is, that you still can place and animate the SVG as you always do.

 

I will need to experiment with this and see how it works, but just figured I would pass it on in-case anyone was trying to control the SVG drawing from inside of Edge with GSAP.

Link to comment
Share on other sites

yep , with Edge Commons Helpers you can access to SVG , that replace your imported/pasted svg img tags with SVG objects  ;

 

pls load EdgeCommons.js and jquery ( if you'r using EdgeAnimate 2014.1 )  and try this :

 

// Enable SVG access
EC.SVG.accessSVG(sym.$('svgImage')).done(

function(svgDocument){
var yourSVG = $("#symbol",svgDocument) ;
// now you can select your SVG child tags with class or id
TweenMax.from(yourSVG,2,{ drawSVG:0, ease:Power1.easeInOut });
// your functions & tweens ...
}

);
Link to comment
Share on other sites

Hi Diaco.AW,

 

I seem to be having trouble with getting that to work.

I posted my code here to download, but you'll need Edge Animate 2014.1 to open the project

http://www.visualla.com/sandbox/edge-1.zip

I appreciate it if you had the time to take a look.

 

One other thing to add -- here is the HTML document, and if you inspect it, you will see the SVG is now being treated as SVG, and we can see the <path>, <g>, <polyline>, etc... but there are no classes added to the <path> tags when inspecting in Chrome, maybe we are missing that piece ...? See HTML document and inspect here: http://www.visualla.com/sandbox/publish/web/master.html

 

Thanks,

Steve

Link to comment
Share on other sites

Hi again :)

 

yep , pls add class ".chinese-letter"  to your SVG child tags : <path>,<line>...ect  , that's all you need to do .

  • Like 1
Link to comment
Share on other sites

Hi Diaco.AW,

 

It seems that jQuery has a little trouble adding classes to SVG tags, so I added a class directly to the SVG during export. The class is ".st0" for every SVG child tag, if you inspect with the console you can see the classes are there. I even manually added the SVGplugin, and TweenMax to the HTML doc to make sure Edge was adding them properly, and still it doesn't seem to work. Here is a link to the HTML.

 

http://www.visualla.com/sandbox/gsap/master.html

 

And here is the exact code I place into edge

var tl = new TimelineLite();
var element = sym.$("chinese-letter" );

//sym.$("path").addClass( "chinese-letter" );

EC.centerStage(sym);

EC.SVG.accessSVG(element).done(
	function(svgDocument){

			tl.from(".st0", 3, {drawSVG:0, opacity:0, ease:Power1.easeInOut})

});

There's gotta be something that I am doing incorrectly. If I change the GSAP code to tl.from(element, 3, {drawSVG:0, opacity:0, ease:Power1.easeInOut})

I do see the opacity working, so GSAP is working, but just not the SVG part, and it doesn't seem to recognize the child classes. I wonder if the child classes are actually rendering in the DOM later, and the .js doesn't see it because it renders after the .js in the DOM. What do you think ?

Link to comment
Share on other sites

Its clear Diaco is much better with Edge than I am but i think you are mis-interpreting his suggestion about adding the chinese-letter class.

The way I see it you have 2 options

 

  1. edit the svg by hand in a text editor
  2. if you do it using jQuery .addClass() you would need to do it BEFORE you define what element is
Bad:
var element = sym.$("chinese-letter" );
sym.$("path").addClass( "chinese-letter" );

Most likely better:

sym.$("path").addClass( "chinese-letter" );
var element = sym.$("chinese-letter" );
 
 
Link to comment
Share on other sites

If you look at Dev Tools, it shows that you're just tweening the opacity of the container <div>, not the SVG at all. And the SVG is in an <embed> and segregated into its own document, so I'm not sure the browser will allow you to access that stuff (just like svg inside an <img> src). I don't have time to research that right now, but I just wanted to point out that this isn't a GSAP issue - it's just that you're not targeting the SVG nodes properly. I wish I had an easy answer for you. I'm kinda surprised Edge Animate won't allow you to use inline SVG. Have you tried injecting it via AJAX or something (as we suggested earlier)? 

 

Also, I think Diaco was suggesting that you add those classes inside the SVG itself. When I looked at your SVG file, there aren't any classes assigned. 

Link to comment
Share on other sites

Thanks Carl,

 

yes, I tried every which way to target the SVG children, but I had no luck. I changed the actual SVG document to include classes, rather than injecting them with jQuery, and still no luck. I even tried using GSAP outside of EDGE in another .js file, with the object generated through edge and no luck -- It's strange that the object is it's own #document. I'm going to give up at this point :)

 

But I will try the AJAX approach, I just don't quiet know how to get it in using AJAX, but I'll do some research and find out how. Thanks for all the help!

Link to comment
Share on other sites

Hi celli :)

 

this's a simple Demo ( EdgeAnimate 2014.1 + GSAP DrawSVG ) ; pls download the attached zip file and put the TweenMax.min.js + DrawSVGPlugin.min.js in  "js" folder , or remove them from Script Library and load your JS via CDN .

 

and if you want to load via AJAX :

sym.$('yourSymbol').load('SVG.svg', function() {
TweenMax.from(".myClass",2,{ drawSVG:0, opacity:0, ease:Power1.easeInOut});
});

GSAP SVG DRAWING AND EDGE ANIMATE.zip

Link to comment
Share on other sites

Hi Diaco, Thank you very much for putting that together!! I added the TweenMax.min.js + DrawSVGPlugin.min.js in  "js" folder and tried the HTML file, but I don't see it drawing the SVG or the opacity. I also looked at the setup in edge animate -- Do you see it working...?

 

To clarify, I see the SVG, but it just pops into the browser -- it doesn't actually draw the paths ...

Link to comment
Share on other sites

Pls don't test that locally , run your adobe Edge and File menu > Preview In Browser (Ctrl+Return) , or use a local test server like Xampp ;

some browsers like the Google Chrome will not load local file by default due to security reason .

  • Like 1
Link to comment
Share on other sites

Hi Diaco,

Your example in edge is working well on Chrome.

 

Thanks for all the help!

 

Peter

  • Like 1
Link to comment
Share on other sites

Thank You Diaco.AW for putting that together and sticking with me on this one !! This is very much appreciated! :)

I am running it from a server and I still only see the SVG elements pop in and not animate the paths. I also set each of the .js files as absolute paths so to avoid any issues there, here is a link so you can see what I mean. 

http://www.visualla.com/sandbox/gsap/diaco/publish/web/demo.html

Do you have an example of it animating the paths in a browser ?

Link to comment
Share on other sites

upon further review, it appears you are loading TimelineMax, but not TweenMax (which includes TweenLite and CSSPlugin) and lots of other stuff you need.

 

however it looks like jQuery is coming down the pipe in some fashion.

 

http://prntscr.com/5rz5x6

 

Be sure you are loading TweenMax, and then hunt down those other errors.

Link to comment
Share on other sites

  • Solution

update. I downloaded Diaco's zip, added TweenMax.min.js and DrawSVGPlugin.min.js to the js folder, dumped the whole project folder on a server and it worked fine:

http://greensock.com/temp/edge/demo.html

  • Like 2
Link to comment
Share on other sites

Thank You Carl and Diaco!!! I can't believe I had such an error. It was the fact that I wasn't even loading TweenMax !!!

I can't believe that I missed that, my apologies to waste anyone's time here. It does work very well -- and even with this I learned a lot, thanks again guys - you guys are the best :)

  • Like 2
Link to comment
Share on other sites

No worries.

Diaco did a fantastic job.

 

Oh, and nice job on the animation.

Link to comment
Share on other sites

  • 9 months later...

Does anyone else get quite a time-lag before the animation plays? (successfully - I might add ) I'm talking about a serious lag...

Link to comment
Share on other sites

Hi lucto_et_emergo  :)

 

Unfortunately i can't understand what you mean by '' time-lag " 

if you mean a bit delay before animation ; it come from edge animate + EdgeCommons.js , actually that library get your svg image source and replace image tag with a div+inline svg to make that accessible for js selector .

 

you can find another faster ways to load svg here : http://greensock.com/forums/topic/12321-non-inline-svg-and-control-with-gsap/

  • Like 1
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.
×