Search the Community
Showing results for tags 'edgeanimate'.
-
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}); // } } );
- 3 replies
-
- morphsvg
- edgecommons
-
(and 3 more)
Tagged with:
-
Any clue on how to enable the throwProps plugin found in the Shockingly Green library set of Greensock. The momentum scrolling in the feature found on this site works exactly the way it should on iOS http://greensock.com/draggable The scrolling example I've attached has no momentum or inertia when viewing on an iOS device. Ive easily been able to get other libraries to work with no hick-ups but this scroller feature has been bugging me. I'm sure it's something super simple and I'm just overlooking. The current libraries i'm calling are Draggable, Throwprops, TweenMax. Using Edge Animate 2014.1.1 Any thoughts? [edit: files removed that included bonus plugins]
- 6 replies
-
- shockinglygreen
- edgeanimate
-
(and 3 more)
Tagged with: