ulittle

Including your GSAP library into Animate CC 2015 is super easy! All you need to get started is include it in your HTML document at the start of the project - use the "Template for publishing HTML" feature in Animate CC. Sample of GSAP library for DoubleClick banners. <script type="text/javascript" src="https://s0.2mdn.net/ads/studio/cached_libs/tweenmax_1.18.0_499ba64a23378545748ff12d372e59e9_min.js" Once done use Greensock: var t1 = this.txt_01; // reference your movieClip TweenMax.fromTo(t1, 1, {alpha:0} ,{alpha:1, ease:Sine.easeOut}); Code away!

I looked into while back and found that with the minified version I could include in zip package under the required size limit. Unfortunately this type solution would fall as a Rich-Media placement and that means different cost than a standard banner. Dealing with positioning of objects (x & y )can be extremely tedious and in my opinion it's bit 'buggy' when dealing with the browser resizing. Perhaps someone can correct me wrong as I would love to use it.

Caution on Edge Animate: Hope you’re aware Edge Animate is discontinued. https://www.adobe.com/au/products/edge-animate.html Unfortunately I feel we are in a 'transition' period again with Adobe - why? 3D properties like rotationX & rotationY are not supported in the current version of Animate CC 2015.1 - This means no ‘spinning’ effects available for me so I'll be relying on edge for a bit longer - but I would recommend making transition. See post on 3D issues: http://greensock.com/forums/topic/13602-greensock-in-adobe-animate-3d-flip/?p=57014

Hi Diaco, This solution definitely solved it - Thank you for your help! Your code simplifies the process and more important it only requires the use of the TweenMax(latest) and the MorphSVGPlugin. https://secure-ds.se...3/jquery.min.js https://secure-ds.se...TweenMax.min.js (current version 1.1.8 ) EdgeCommons.Core.js
 EdgeCommons.SVG.js MorphSVGPlugin.min.js function AE_SVG(T,F){ var X=document.getElementById("Stage_"+T), URL=X.style.backgroundImage.replace('url(','').replace(')','').replace(/['"]+/g,''); var XR=new XMLHttpRequest(); XR.onreadystatechange=function(){ if (XR.readyState==4&&XR.status==200){ X.style.backgroundImage='';X.innerHTML=XR.responseText;var S=X.getElementsByTagName('svg')[0]; S.setAttribute('width',X.offsetWidth);S.setAttribute('height',X.offsetHeight);F(); } };XR.open("GET",URL,true);XR.send(); }; /////////////////////////////////////////////////////////////////////////////////////////////////// /////////////////////////////////////////////////////////////////////////////////////////////////// AE_SVG("pbg_upper",FXArray); // pass your SVG id + your function for callback function FXArray(){ var svg1_a = ["#upper_baseShadow", "#upper_base", "#upper_keyline", "#upper_txt"]; var svg1_b = ["#bulge_baseShadow", "#bulge_base", "#bulge_keyline", "#bulge_txt"]; // TweenMax.to(svg1_a[0], .3, {morphSVG:svg1_b[0], repeat:1000, yoyo:true, ease:Sine.easeInout}); TweenMax.to(svg1_a[1], .3, {morphSVG:svg1_b[1], repeat:1000, yoyo:true, ease:Sine.easeInout}); TweenMax.to(svg1_a[2], .3, {morphSVG:svg1_b[2], repeat:1000, yoyo:true, ease:Sine.easeInout}); TweenMax.to(svg1_a[3], .3, {morphSVG:svg1_b[3], repeat:1000, yoyo:true, ease:Sine.easeInout}); };

Hi, I have animated SVGs with success using the morphSVG plugin within Edge Animate via the EdgeCommons library. For banner development Sizmek and DoubleClick don't host the edgeCommons library and to include it in production is almost prohibitive (69k). A solution is including only the EdgeCommons.Core.js and EdgeCommons.SVG.js. Unfortunately in doing this the latest version of jquery has to be downgraded (hosted by SIzmek and DoubleClick) and banners are limited to the number of assets. Is there an alternative to EdgeCommons? to access the SVG ID's. The solution is based on this question. http://greensock.com/forums/topic/11131-svg-plugin-with-edge-animate/ The code below works - (it's not pretty) and it relies on the libraries: https://secure-ds.serving-sys.com/BurstingcachedScripts/libraries/jquery/1_11_3/jquery.min.js https://secure-ds.serving-sys.com/BurstingcachedScripts/libraries/greensock/1_18_0/TweenMax.min.js EdgeCommons.Core.js EdgeCommons.SVG.js MorphSVGPlugin.min.js EC.SVG.accessSVG(sym.$("png_upper")).done( function(svgDocument){ // var svg01_a = $("#upper_baseShadow",svgDocument)[0]; var svg01_b = $("#bulge_baseShadow",svgDocument)[0]; // var svg02_a = $("#upper_base",svgDocument)[0]; var svg02_b = $("#bulge_base",svgDocument)[0]; // var svg03_a = $("#upper_keyline",svgDocument)[0]; var svg03_b = $("#bulge_keyline",svgDocument)[0]; // var svg04_a = $("#upper_txt",svgDocument)[0]; var svg04_b = $("#bulge_txt",svgDocument)[0]; // //Animate Tablet var a = .3; var d = .1; var r = 1; var tablet = sym.$("png_upper"); var pbg = sym.$("PBG_lower"); TweenMax.fromTo(tablet, 2, {scaleY:1, scaleX:1}, {scaleY:2, scaleX:2, onComplete:svgEffect, ease:Elastic.easeOut}); TweenMax.fromTo(pbg, 3, {x:0, scaleX:1, scaleY:1}, {scaleX:1.2, scaleY:1.2, x:100, ease:Elastic.easeInOut, delay:.7}); function svgEffect(){ TweenMax.to(svg01_a, a, {morphSVG:svg01_b, repeat:r, yoyo:true, transformOrigin:"50% 50%", ease:Sine.easeOut}); TweenMax.to(svg02_a, a, {morphSVG:svg02_b, repeat:r, yoyo:true, transformOrigin:"50% 50%", ease:Sine.easeOut}); TweenMax.to(svg03_a, a, {morphSVG:svg03_b, repeat:r, yoyo:true, transformOrigin:"50% 50%", ease:Sine.easeOut}); TweenMax.to(svg04_a, a, {morphSVG:svg04_b, repeat:r, yoyo:true, transformOrigin:"50% 50%", ease:Sine.easeOut}); // } } );