Jump to content
GreenSock

ulittle

Alternative to using EdgeCommons for morphSVG within EdgeAnimate

Go to solution Solved by Diaco,

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

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});
		//


	}

}
);
Link to comment
Share on other sites

"banners are limited to the number of assets."

 

I reached out to our Doubleclick contact on that point because I have ads with 11 different logos that I just wanted to be able to swap, and have logos that were not even being called in the assets i was zipping, otherwise the folder structure needed to segregate all those versions would have been crazy. His reply was to just book it as an Enhanced Banner which everyone got upgraded to for free anyways.

 

Once AdOps started booking them in DCM (I peeked) it was apparent that only 300x600s were being bumped to Enhanced Banners, and that was based on going over 200K because of larger images, not for the number of assets. So you might want to ask DC support if what I noticed is true. We have in house DCM AdOps.

 

FYI you do want AdOps booking as Enhanced as the metrics are rich media in depth.

 

The support docs say one thing but you don't always get dinged for the rules.

  • Like 1
Link to comment
Share on other sites

  • Solution

Hi ulittle  :)

 

pls try this :

 

function An_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();
};
///////////////////////////////////////////////////////////////////////////////////////////////////
///////////////////////////////////////////////////////////////////////////////////////////////////

An_SVG("SVG",RUN); // pass your SVG id + your function for callback 
An_SVG("anotherSVG",RUN2); // pass your SVG id + your function for callback 

function RUN(){
  TweenLite.to("#head",1,{x:200}); 
}; 

function RUN2(){
  var tl=new TimelineLite();
      tl.to("#svgtext",1,{x:200});
      //........ 
};

pls put these code in your compositionReady , btw , i just test that in local systems not online server .

 

pls let me know if have any problem with that :)

Link to comment
Share on other sites

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});
}; 
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.
×