Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
lucto_et_emergo

Animated SVGs and Adobe Edge Animate - Does Edge Animate support GSAP and SVGs?

Recommended Posts

I have attached a file that I downloaded that indeed works with Edge Animate, but I can not get any other SVG to work in this file.

 

I am wondering what I am doing wrong... the code seems straightforward enough...

 

there is a bit of a lag when previewing as well... wondering what this about...

 

What I thought I could do is substitute another symbol for the one in this file, just keep the same div name but I suspect it's more complicated than this...

 

Could someone point me in the right direction as always?

 

I would like to use Edge Animate as my platform for developing for now...

 

 

You guys rock.

GSAP SVG DRAWING AND EDGE ANIMATE.zip

Link to comment
Share on other sites

Hi lucto_et_emergo :)

 

this's a simple Demo with ( EdgeAnimate 2014.1 + GSAP )

 

you need to add TweenMax.min.js + DrawSVGPlugin.min.js to "js" folder  .

 

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

  • Like 4
Link to comment
Share on other sites

Thanks Diaco,

The example file that I supplied has worked successfully when previewed in a browser and on a local test server,

 

However my issue is I can't figure out why I can't get any other SVG to work using the same code and using the same div name ('GSAP')

 

Whenever I substitute a new SVG, even with the same name I do not get a result.

 

What could be the reason for this?

 

I have attached a file as an example....

 

 

Edit : attached files removed ( included bonus plugins )

Link to comment
Share on other sites

pls fix these issues :

 

1- pls check the js code , comments and your svg file ( you should to set class name for your svg paths )  :
EC.SVG.accessSVG(sym.$("Pasted")).done( // Pasted = your image id
  function(svgDocument){
    var yourSVG = $(".myClassName",svgDocument) ; // "myClassName" your svg Path class name
    TweenMax.from(yourSVG,10,{drawSVG:0});
  }
);
check svg path Class name and js code in this demo : 

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

 
 
2 - pls set stroke and stroke-width property for your path in your svg file , or set via GSAP like this :
EC.SVG.accessSVG(sym.$("Pasted")).done(
  function(svgDocument){
    var yourSVG = $(".myClassName",svgDocument) ;
    TweenMax.set(yourSVG,{ stroke:'red' , strokeWidth:5 }); // set stroke and stroke-width 
    TweenMax.from(yourSVG,10,{drawSVG:0});
  }
);
 
3 - you just need to load these js files :
 
TweenMax.js  +  DrawSVGPlugin.js  +  jquery  +  EdgeCommons.js
( you need jquery and EdgeCommons just for make svg accessible for js selector )
 
 
4- the opacity property can take a value from 0-1 ( you set to 5 in your tween )
 
 
and finally ; pls don't share zip files with club bonus plugins :)
  • Like 1
Link to comment
Share on other sites

Thanks very much for your patience and time (!) and apologies for "share zip files with club bonus plugins" (doh!) 

 

The most important thing is how you save your illustrator files:

http://graphicdesign.stackexchange.com/questions/33764/specify-css-class-names-on-svg-paths-using-illustrator

 

"myClassName" your svg Path class name

When you save your SVG from illustrator, click on the SVG code generator at the bottom of the panel that opens, the path class is located near the bottom:

 

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 18.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 200 200" style="enable-background:new 0 0 200 200;" xml:space="preserve">
<style type="text/css">
.Drop_x0020_Shadow{fill:none;}
.Round_x0020_Corners_x0020_2_x0020_pt{fill:#FFFFFF;stroke:#231F20;stroke-miterlimit:10;}
.Live_x0020_Reflect_x0020_X{fill:none;}
.Bevel_x0020_Soft{fill:url(#SVGID_1_);}
.Dusk{fill:#FFFFFF;}
.Foliage_GS{fill:#FFDD00;}
.Pompadour_GS{fill-rule:evenodd;clip-rule:evenodd;fill:#44ADE2;}
.st0{fill:#FFFFFF;stroke:#231F20;stroke-miterlimit:10;}
</style>
<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="0" y1="0" x2="0.7071" y2="0.7071">
<stop  offset="0" style="stop-color:#DEDFE3"/>
<stop  offset="0.1783" style="stop-color:#DADBDF"/>
<stop  offset="0.3611" style="stop-color:#CECFD3"/>
<stop  offset="0.546" style="stop-color:#B9BCBF"/>
<stop  offset="0.7324" style="stop-color:#9CA0A2"/>
<stop  offset="0.9181" style="stop-color:#787D7E"/>
<stop  offset="1" style="stop-color:#656B6C"/>
</linearGradient>
<path class="st0" d="M4.7,4.3c0,0-4.3,94.3,81.7,95.7c114,1.8,110.3,97,110.3,97"/>
</svg>
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.
×