Oliver16Years

hi Maula, I had this CSS on SVG problem before. I wasn't able to tween clip or mask tags with css or attribute animation. Then I wrote a GSAP tranform plugin, which can tween rotation, scaleX, scaleY, centerX, centerY, skewX, skewY, translateX, translateY. PM me if You are interrested. I posted here earlier but noone answered or liked it, so i removed it

Ye, their uploader thinks it's a stroboscope. Clever! The only way left is to make a slideshow from it, I'm afraid. Or maybe a barebone HTML with only the .gif in it in an <img> tag + header, clicktag etc. If they check for individual assets framerates, i would inline the gif. I am pretty sure, they can't parse it. https://www.npmjs.com/package/inliner

Edge's huge fault was the JQuery integration and the extremely processor intensive GUI. Otherwise the ads exported with it are running at 60fps and their assets aren't blurry/cracky. One of my favorite game to look at an ad guess the authouring technique and finally examine source code. Hand coded and Edged banners are the best looking. Animate ads, on the other hand, can be quite complex.

My opinion is: Animate CC is the best official tool if You don't have a better custom tool. It's bottlenecks are the the tedious asset import from Photoshop and the <canvas> as the main stage, which is excluding almost all the other HTML5 possibilities. <canvas> is a good surface to draw on but it is only one little part of the HTML. Timline is luckily not needed if You code in GSAP. The only function which is useable is the EASELJS+HTML export. Adobe dropped it's alpha DOM authoring tool, to breathe life into Flash again, but I feel it was a mistake.

This is the fastest and simplest solution. Import the uncompressed frames to Photoshop as layers, make timeline animation from them. Drop out 3 frames from every 4. Use lossy gif compression with transparency, fewer colors, and less dither. Recreating this anim in HTML5 can be time consuming, but definitely possible

Maybe You have to transform the translateX. attr animation won't work in a few cases in every browser. At least not working with clip-path, mask and possibly in this case.

By the way: Did You try the gradient with bitmap caching turned on?

I really have to test my banners on iDevices and slower pcs. I just bought an NVidia 1060 or something, which seems like too good for HTML banner developement. A perpectly average gfx card would be ideal.

I don't see jerkiness in Win7 Chrome. If You put Your banner on a site via an adserver, there will be more ads running at the same time, which will cause noticable jumps, and lagging in the animation. The translate3D won't have any effect in case of <canvas> I think.

Try to put a white stroke around the text, or animate it with attr plugin. CSS is not alway compatible with SVG animation.

Thanks for Your support Vitaliy! I saw You post on https://www.en.advertisercommunity.com/t5/Advanced-Features/Why-AdWords-replacing-lt-image-gt-tags-in-SVG/td-p/867486 I bet this is a 15 min task to fix, But Google is too big... Oliver

ADWORDS: Pros: 150k .zip size counts. This means we can base64 + inline all assets. Cons: Lame validator failing on many valid solutions. Dumb uploader/converter changing SVG <image> tags to <img> which is destroying SVG ads. 30 sec loop limit. Unwanted button on the top right corner which is covering the legal text star in many cases. SIZMEK: Pros: null Cons: Pain in the #@? web based ad uploader. fallback.jpg is required but not used only for sizing the ad. Junk, outdated templates. Uploader failing on JSZipped packages. ADFORM: Pros: undefined Cons: 100k limit. Customized manifest.json Additional script include which requires further customization. 30 sec loop limit. DOUBLECLICK: Pros: 300k size limit ( Media agency dependent ). No adFormat specific .js include. Cons: Built in landing page URL. Required fallback.jpg. These are local fromats in Eastern Europe: GEMIUS: Pros: No fallback.jpg, loop limit, embedded landing page URL. Retina hosting for additional monthly fee. EASYHTML: Pros: 300k size limit. Cons: Every asset and every size mutation goes to the campaign's root folder. We need to uniquely name every file. And here is a perfect, imaginary format: SANTACLAUS: Pros: 300k .zip size limit. No fallback.jpg. No embedded landing page URL. No custom adFormat specific .js include. Browser based targeting based on <meta> tags.

These are only ratios expressed in an imgainary currency. You can substitute any value in place of ¥. This is my pricing system which means You can do a better one for Your special case. It is an example only.

After a half year of intense hacking/coding and patching, I felt my adWords ads are safe from validator's silly error messages, but recently encountered an insane bug, not in validator but in the adWords image ad uploader/converter. I have made a few banners for Coca Cola with SVG soft masking and clip paths. When I uploaded to adWords all the ads fell apart. It turned out, the uploader converted my <image> tags to <img> which is.... bad. Beside this the program tried to close the <path> <maks> <clip-path> tags, without success. This is a part from my HTML: <svg id = 's' width = 300 height = 250 viewBox = '0 0 300 250' xmlns = 'http://www.w3.org/2000/svg' class = Asset > <rect id = 'back' x = -23 y = -1 width = 344 height = 125 fill = 'rgb( 239, 239, 239 )' /> <g id = 'PICBG' layout = '156 0 97 110' > <rect id = 'b1' x = 99 y = 9 width = 97 height = 94 fill = 'rgb( 229, 229, 229 )' /> <rect id = 'flow' x = 145 y = 31 width = 4 height = 41 fill = 'rgb( 0, 0, 0 )' /> <rect id = 'flow2' x = 145 y = 31 width = 4 height = 41 fill = 'rgb( 0, 0, 0 )' /> <path id = 'b4' transform ='scale(.1)' layout = '141 24 13 8' fill = 'rgb( 210, 210, 210 )' d = 'm1415,242h120v25c0,28 -22,50 -50,50h-20c-28,0 -50,-22 -50,-50v-25z' /> <path id = 'b3' transform ='scale(.1)' layout = '130 13 35 13' fill = 'rgb( 170, 170, 170 )' d = 'm1300,137h350v65c0,28 -22,50 -50,50h-250c-28,0 -50,-22 -50,-50v-65z' /> <path id = 'b2' transform ='scale(.1)' layout = '99 -7 97 22' fill = 'rgb( 98, 98, 98 )' d = 'm990,-68h970v115c0,55 -45,100 -100,100h-770c-55,0 -100,-45 -100,-100v-115z' /> </g> <g id = 'SLIDER' layout = '0 57 354 114' > <image id = 'poharReflect' x = -33 y = 72 width = 29 height = 77 /> <image id = 'pohar1' x = 27 y = 72 width = 29 height = 77 /> <image id = 'pohar2' x = 87 y = 72 width = 29 height = 77 /> And this is what adWords made from it: <svg class=Asset height=250 id=s viewBox="0 0 300 250" width=300 xmlns="http://www.w3.org/2000/svg"> <rect fill="rgb( 239, 239, 239 )" height=125 id=back width=344 x="-23" y="-1"> <g id=PICBG layout="156 0 97 110"> <rect fill="rgb( 229, 229, 229 )" height=94 id=b1 width=97 x=99 y=9> <rect fill="rgb( 0, 0, 0 )" height=41 id=flow width=4 x=145 y=31> <rect fill="rgb( 0, 0, 0 )" height=41 id=flow2 width=4 x=145 y=31> <path d="m1415,242h120v25c0,28 -22,50 -50,50h-20c-28,0 -50,-22 -50,-50v-25z" fill="rgb( 210, 210, 210 )" id=b4 layout="141 24 13 8" transform="scale(.1)"> <path d="m1300,137h350v65c0,28 -22,50 -50,50h-250c-28,0 -50,-22 -50,-50v-65z" fill="rgb( 170, 170, 170 )" id=b3 layout="130 13 35 13" transform="scale(.1)"> <path d="m990,-68h970v115c0,55 -45,100 -100,100h-770c-55,0 -100,-45 -100,-100v-115z" fill="rgb( 98, 98, 98 )" id=b2 layout="99 -7 97 22" transform="scale(.1)"> </path></path></path></rect></rect></rect></g> <g id=SLIDER layout="0 57 354 114"> <Img height=77 id=poharReflect width=29 x="-33" y=72> <Img height=77 id=pohar1 width=29 x=27 y=72> <Img height=77 id=pohar2 width=29 x=87 y=72> At runtime, the <Img> tags are popping out of the <svg> structure as the browser trying to understand them. It places them after the closing </svg> tag. And notice the desperate effort of Google employees to close the tags: </path></path></path></rect></rect></rect></g> It took a half day to hack around this. The solution was to introduce an imaginary tag ( don't ask it's name. i was angry ). At runtime iterate over these elements. With every element: copy it's attributes, make proper SVGImageElement with these attributes, inject it into DOM after the imaginary element, delete the old element.

Flanimate is the best commercial tool currently on the market, BUT: - It cannot edit pixels, You have to call Photoshop for help - It's code editor is weak, simple and unreplaceable. - You have to spam your code with "this." to reach elements - Based on a > 15 years old movieClip structure which makes the sub-sub-sub elements hard to reach - Timeline based which is hardly used with GSAP animations. ( everything is on frame1 ) - Must watch out for sub pixel positioned pixel elements, otherwise You will get blurry. - If you using a scaled asset without actually rendering it 1:1 in Photoshop, You will get blurry or cracked appearance. - The canvas .mp4 soft masking is gives different results on different browsers and GPUs. - You cannot test the exported html separately from the authoring tool or a web server. Generally it is an animation tool, not a banner ad making one. Canvas is great, but gives access to only a little subset of the possibilities of HTML5. I feel they patched Flash ASAP to have a HTML5 exporting app and killed Edge fast to eliminate it's competitor. Edge was an interresting experiment but it went in the wrong direction like GWD. As I see the ( because i am checking every encountered banner ad with right click ) big percentage of the smooth, sharp, clear ads are still made with EDGE or hand coding. If I were Adobe, I would start to work on a HTML/DOM/SVG/CANVAS/WEBGL authoring tool immediately.

Great engine! One thing what I noticed in the downloaded .html: The app.min.js is a bit big. You could use CDN GSAP link instead including the whole lib into it. I have something similar for personal use, which is exporting html5 ads from .psds, but with different approach. Your engine's target audience is designers without GSAP/HTML skill, mine is GSAP scipters without HTML skill. Good luck!

It goes from 10 minutes to 1 hour. The later if I need to optimize the assets crop area, transparency, or need to rearrange text lines etc. But I have a system which is allowing me to care about only the importatnt parts, every other task is automated.

My default is a fullscreen fader.div which is hiding every elemen till the first JS tween line is .to()-ing it to autoAlpha:0

It's a very simple fomat: First put the landing page URL in somewhere: <script> var clickTag = '{{landingPageUrl}}';</script> Then wrap the ad in an anchor tag: <a id = clickArea href = 'javascript:window.open(window.clickTag)' class = Fullscreen ></a> Your ad can be maximum 300k.

Check out this video about sequencing: http://greensock.com/sequence-video Set up a timeline sequence with a new TimelineMax/Lite, add labels to it and start moving around in it with .addLabel() .seek() .tweenTo() .pause() .play() .progress() .restart() ... You can find all the goodies here: http://greensock.com/docs/#/HTML5/GSAP/TimelineMax/ If You need immediate interaction which is not in a timeline, just call a tween from an event handler like: Stage.addEventListener( 'mouseover', function() { TweenMax.to( BUTTON, 0.3, { x: 3, y: 3 } ) });

Here is a basic solution but it needs a restart section: https://codepen.io/oliver15years/pen/oYNWmm If you are in an iFrame, You don't need JQuery or document.getElementById() to access the DOM elements. Just use their ID as an identifier. I am always using labels to set anchors in time.

I would console.log out the "#wedgePath_" + id part. I suppose the id is running out of range in Your loop.

Nice SVG masking, particles, spritesheet animations and all. Professional DOM banners! Could You please describe Your workflow a bit?

If You need small and clean svg, You have to write Your own svg exporter in ExtendScrip's .jsx javascript format. This is the language of the Adobe applications. But It requires a lot of time, adept patience ( bad documentation, sluggish JS engine ) and journeyman skill in JS. But if a stock SVG is fine, You can File/Export it, clean it with SVGOMG: https://jakearchibald.github.io/svgomg/ If You need only one shape's data, just Right click/Export it. If you chose the hard way, You can start studying these: http://wwwimages.adobe.com/content/dam/Adobe/en/devnet/illustrator/sdk/CC2015_3/AI_ScriptGd.pdf http://wwwimages.adobe.com/content/dam/Adobe/en/devnet/illustrator/sdk/CC2015_3/Illustrator%20JavaScript%20Scripting%20Reference.pdf

Seek, draggable, multiply: http://www.bannerhost.hu/budapestbank/oszikalkulator/PK_Osz_Kalkulator_640x360_GEMIUS_04/