Oliver16Years

They have changed something recently. Now only this include works: <script src="https://secure-ds.serving-sys.com/BurstingScript/EBLoader.js"></script> But best if You get/steal/beg for a SIZMEK login to try out Your banners in their MediaMind Sizmek MDX, where You can make preview links for them.

I was so happy with my first, half SVG banner. But suddenly I realized: it is LAGGING! Why? Why is it laggin when my full surface is only 970x250 and I am moving only a few vector elements?! S..t! This one month of coding of my SVG DOM exporter was a wasted time? I was exprerimenting a bit and turned out I can't force the GPU to accelerate these element. When I did that with CSS, the animation is just stopped working. Then I saw a guy who put all his <path>s into <div><svg>*</svg></div>s and feed them into the GPU. Hell no! The main problem is: there is no bitmap caching on SVG elemens like in EaselJS's canvas. I think SVG gonna be good for animations in next 15 Years in the era of Quantum computing. But pleease contradict me!

actualTween exists only for a fraction of second in the for loop. Then the timeline wich was referenced by this "actualTween" variable is pushed in the tweens array. So if You want to terminate all the particle timelines, You have to loop through the "tweens" array and stop each TimelineLite instance. I have spotted a little confusion here: these are not tweens in the array, they are actually timelines. My bad, sorry. It just worked If I get one million likes, I will consider making the engine reusable But seriously. The basic concept is: 1. Make a clone of a DOM graphical element. 2. Put the clone into a container. 3. Create a new timeline instance. 4. Animate the clone with this timeline. ( Math.radom() makes the tweens different ) 5. Randomize the timeline's progress to avoid crowding at the spawn point. 6. Store a reference to the timeline in an array to protect it from garbage collection and make it accessible. 7. Manipulate all the timelines in the array with a for loop. For instance: If you spawn 100 particles, You will get 100 DOM <img> and 100 GSAP TimelineLite instances existing in paralell. Each of the timelines controlling one DOM element. If You want to delete the visual appearances of the particles, You have to remove them from the DOM structure. If You want to kill the tweens You just have to empty the array which is holding them. ( I hope )

The spawnBubbles() funciton generating a finite number of particles and terminating. After that, the particles living their individual tween cycles. They move along in their random path and their tweens are restarting. Until - I think - a reference is pointing at them. Which is in the "tweens" array.

Hi dada78, I am glad You found it useful. It was made in an hour so it's code is a bit messy. I gave up the polishing when it worked. 1. Scale factor is used in different size mutations, because the bubbles aren't spawned in a scaled container, I just patched all the tweens with this quick multiplication. 2. The positioning is by an invisible div called "bubbles" which is referenced by this line: var ss = document.getElementById("bubbles"); Don't ask why ss, it just short. If you color this div to something else you can position the spawn point of the particles visually. You don't have to enter numbers. ss.appendChild(cln); attaching the actual particle clone to this div. The position is i think is the top left corner of "bubbles" div. 3. .to(cln, Math.random() * 2 + 11, { /// Clone! your motion's duration is 11 sec + 0 to 2 additional secs! y: "-=" + 600 * sf, /// Move up approx 600px from your spawn location! x: "+=" + (Math.random() * -300 * sf + 100 * sf), /// Go either left or right a bit while moving, but mostly left! .progress(Math.random()); /// Clone don't just spawn and start moving! Start your tween somewhere in the middle of your jouney! ss.appendChild(cln); /// Take your place in this friendly div called "bubbles" and appear on screen! 4. To fade in or do whatewer You want with the particles, just modify the actualTween as You want the particles to behave. 5. Dunno, I dindn't need to kill them, because the anim was always on. Maybe you just hide them with autoAlpha? Or delete the reference to them. This is not clear to me. Maybe if You go through the "tweens" array and kill all the Tweenlite instances in it with a forEach loop. I hope this helps a bit. Best regards, Oliver

asdfasdef

aasdfsdf

Sounds like You have to be an übercoder to do all this stuff.

I am so happy using the id as a reference. I don't have to type these weird shifted charcters around my element names every time, what is time and energy consuming, if I have an hour to come up with an animation. My banneres running in a separated iFrame and newer saw a name attirbute. When I realized, that I don't need to use var myA = document.getElementById('a'); just type a, i was the happyest tweener in the world. 36 characters vs 1. You wont get away this from me!! The rotation center point is of course calculatable, with a few javascript line, since I am using a generator script which is making all this so called "human readable" code for me. I just looking for a simple and elegant solution. According the white spaces. I like to waste a few kilobytes on space characters for a nicer xml, and gain it back with little more quanted .png assets. I was trying to rotate the <mask> element's childs ofc. Not the mask element itself. At this point I have a stable, animatable svg mask engine by avoiding CSS and just touching attributes. This is working in all my browsers. The CSS tweening is only in Chrome. Many thanks for dealing with my problem Jonathan

I don't know. If I remove the <defs> still nothing happens in Firefox. Looks like I am unable to animate masks with CSS. Only with attr:{} Lets suppose I am using the attributes plugin. Then I have problem finding the center of the element when I want to rotate it. tl.to( element, 5, { attr: { "transform": "rotate(360 150 150 )" } }, 1 ) I have to calculate the center point somehow. ( 150 150 ). Is there a way similar to transformOrigin to specify the rotation center in percentages? Thanks.

Hi everyone, In this codepen demo I have made an <image> and a <mask> tag, and trying to tween the mask, which is working fine in Chrome but, in Firefox or in IE11, nothing happens. https://codepen.io/oliver15years/pen/kkvzKN What the h... again!? Shall I redraw the whole scene onUpdate somehow? Is there a way to animate masks in every current browser? Thanks a lot! Update: I think I have to rotate the item with svg transfrom like this: https://codepen.io/oliver15years/pen/wzpOqG tl.to( a, 1, {attr:{ transform: "rotate( 45 )" } } ) tl.to( a, 1, {attr:{ transform: "rotate( 0 )" } } ) If I use CSS rotation not all browsers updating the svg composition. But how can I simply rotate an svg element without tranfroming it with translate and rotate and translate it back?

I would make a low resolution image sequence from the flag, in exactly the same pixel dimesions as the circle matrix. Then using canvas I would get the pixel data from the pictures, with the help of html canvas, and finally draw the animation frames using canvas circles or with divs or svg circles. You need two functions like: getPixelDataFromImage( img ), drawPixelDataToCircleMatrixDisplay( pixelData ); Another imaginary solution is to simply play an animgif in svg environment ( if its possible ) and simply apply a filter on it. This solution needs a filter which is making a circle matrix from a picture. I don't know if it's possible to make a filter like this, but You can experiment in Inkscape. https://inkscape.org/en/ https://www.smashingmagazine.com/2015/05/why-the-svg-filter-is-awesome/ One more: Pixelated image rendering + a cover image with circular holes in it. https://developer.mozilla.org/en-US/docs/Web/CSS/image-rendering https://css-tricks.com/almanac/properties/i/image-rendering/

If You know javaScript, start to write apps to do the repetiting and tedious tasks for You. Reduce the input to the minimum and launch Your little tool which will genereate the the ugly-bugly html/css/svg/png/jpg for you. ( The minimum input is: graphical layout + GSAP tween. ) I saw a guy who exported his whole tag structure from Illustrator, somehow framed it in a template and added a tweenScript to it.

This is a possible offline config: <script src="scripts/TimelineLite.min.js"></script> <script src="scripts/TweenLite.min.js"></script> <script src="scripts/EasePack.min.js"></script> <script src="scripts/CSSPlugin.min.js"></script>

Sorry about that Joe, but I had to do something. Beleive me I am really-really upset because they forced us from Flash - which was a visually reliable platform - to HTML . Since then more than a year is went by, and we still struggling with these bugs and exceptions and strange browser behaviours.

Oke, I have rewritten my banner exporter's asset handling lines. Replaced all <div> assets with <img>. And currently reexporting all my running ads, and sending the .zips to my clients asking them to send them to media agency and ask them reupload them.

Don't let them breathe till they fix this. By the way: Kashter's solution is kinda working. ( except in case of retina resolution zoom out )

You are right Jonathan. I see now this is not the solution. I give up and will bring this issue to my client's attention.

They give this solution: https://docs.google.com/document/d/1f8WS99F9GORWP_m74l_JfsTHgCrHkbEorHYu72D4Xag/edit Put will-change: transform; in the CSS, but is is making the entire image low rez. Update: My friend tried everything with everything. This is working: -webkit-transform: translateZ(0); will-change: transform; Update: This will cause megablurriness on elements whose are zoomed from smaller to bigger scale.

The Janky zoom is back!!! Chrome 53.0.2785.116 Win7 http://codepen.io/GreenSock/pen/rexpMG I DON'T BELEIVE THIS! Frustrating. I have a few running campaigns with zooms in them.

//You can add function calls to a timeline like this: tl.add( function(){ myLandingPageURL = 'http://www.example.bg'; }, 'label' )

If You use CDN, better to include only TweenMax. It saves You 2 HTTP requests. The .js size isn't important in this case.

Sure WarenGonzaga, feel free to use the information for any purpose. ( except evil )

Sure WarenGonzaga. I wanted to ask all of You for more adFormat info, to put into this .json.

This is my simplified DOM ad tempate. This is working with all ad format what I know at the moment. My little app is filling in the necessary data into the {{double curly bracket}} placeholders. <!DOCTYPE html> <html> <head> <title>basicAdStructure</title> <meta charset = 'UTF-8' > <meta http-equiv = 'X-UA-Compatible' content = 'IE=edge' > <meta name = 'viewport' content = 'width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1' > <meta name = 'ad.size' content = 'width=300,height=250' > <style> html, body { padding: 0px; margin: 0px; background-color: darkgray; } .System { position: absolute } .Asset { position: absolute; background-repeat: no-repeat; } #Stage { width: 300px; height: 250px; position: absolute; overflow: hidden; background-color: rgba( 190, 190, 200, 1 ); } #{{clickTagId}} { left: 0px; width: 100%; height: 100%; bottom: 0px; opacity: 0; cursor: pointer; } #logo { left: 104px; top: 90px; width: 92px; height: 70px; background-color: rgba( 0, 0, 0, 1 ); } </style> </head> <body> <div id = Stage > <div id = 'logo' class = Asset ></div> {{clickTag}} </div> {{engine}} <!-- adformat specific cdn link --> <script src = 'https://s0.2mdn.net/ads/studio/cached_libs/tweenmax_1.19.0_643d6911392a3398cb1607993edabfa7_min.js' ></script> <script> window.onload = function() { {{GSAP_Tween}} }; </script> </body> <script> {{postscript}} // short code snipplet to handle clicktag ( Attached postScrip.zip below ) </script> </html> And this is my precious little .json database which containing all the info needed to fill the above {{fields}} +more: { "ADWORDS": { "name": "ADWORDS", "scripts": "ENGINE_CDN", "assets": "ASSETS_INLINE", "zip": true, "ziplimit": 150, "timelimit": 30, "engine": "<script src = 'https://tpc.googlesyndication.com/pagead/gadgets/html5/api/exitapi.js' ></script>\r\n", "clicktag": "\t<div id = clickTag class = System onclick = 'window.open(ExitApi.exit());' ></div>", "clicktagid": "clickTag" }, "DOUBLECLICK": { "name": "DOUBLECLICK", "scripts": "ENGINE_CDN", "assets": "ASSETS_AUTOINLINE", "kilobytelimit": 200, "zip": true, "fallback": true, "landingpage": true, "engine": "<script> var clickTag = '{{landingPageUrl}}';</script>\r\n", "clicktag": "\t<a id = clickTag href = 'javascript:window.open(window.clickTag)' class = System ></a>", "clicktagid": "clickTag" }, "CADREON": { "name": "CADREON", "scripts": "ENGINE_CDN", "assets": "ASSETS_AUTOINLINE", "kilobytelimit": 200, "zip": true, "timelimit": 15, "fallback": true, "landingpage": true, "engine": "<script> var clickTag = '{{landingPageUrl}}';</script>\r\n", "clicktag": "\t<a id = clickTag href = 'javascript:window.open(window.clickTag)' class = System ></a>", "clicktagid": "clickTag" }, "SIZMEK": { "name": "SIZMEK", "scripts": "ENGINE_CDN", "assets": "ASSETS_AUTOINLINE", "kilobytelimit": 200, "zip": true, "fallback": true, "engine": "<script src=\"http://ds.serving-sys.com/BurstingScript/EBLoader.js\"></script>\r\n", "clicktag": "\t<div id = 'clickthrough-button' class = System ></div>", "clicktagid": "clickthrough-button", "postscript": "SIZMEK@postScript.js" }, "SIZMEK_INTERSTITIAL": { "name": "SIZMEK_INTERSTITIAL", "scripts": "ENGINE_CDN", "assets": "ASSETS_AUTOINLINE", "kilobytelimit": 200, "zip": true, "fallback": true, "engine": "<script src=\"http://ds.serving-sys.com/BurstingScript/EBLoader.js\"></script>\r\n<script>EB.initExpansionParams(0, 0, 0, 0);</script>\r\n", "clicktag": "\t<div id = 'clickthrough-button' class = System ></div>", "clicktagid": "clickthrough-button", "customscript": "SIZMEK_INTERSTITIAL@script.js", "customstyle": "SIZMEK_INTERSTITIAL@style.css" }, "ADVERTICUM": { "name": "ADVERTICUM", "scripts": "ENGINE_CDN", "assets": "ASSETS_ROOT", "kilobytelimit": 300, "zip": true, "clicktag": "\t<a id = 'clickTAG' class = System href = '[cthref]' onclick = '(function () { document.getElementById(\"clickTAG\").href=HttpGetVars.cthref})();' ></a>", "clicktagid": "clickTAG" }, "EASYHTML": { "name": "EASYHTML", "scripts": "ENGINE_CDN", "assets": "ASSETS_ROOT", "kilobytelimit": 300, "zip": true, "engine": "<script src = '//ad.adverticum.net/scripts/goa-helper.js' ></script>\r\n", "clicktag": "\t<div id = clickTAG class = System ></div>", "clicktagid": "clickTAG", "postscript": "EASYHTML@postScript.js" }, "EASYHTMLMOBILE": { "name": "EASYHTMLMOBILE", "scripts": "ENGINE_CDN", "assets": "ASSETS_ROOT", "kilobytelimit": 120, "responsive": true, "zip": true, "engine": "<script src = '//ad.adverticum.net/scripts/goa-helper.js' ></script>\r\n", "clicktag": "\t<div id = clickTAG class = System ></div>", "clicktagid": "clickTAG", "postscript": "EASYHTML@postScript.js" }, "GEMIUS": { "name": "GEMIUS", "scripts": "ENGINE_CDN", "assets": "ASSETS_AUTOINLINE", "kilobytelimit": 200, "zip": true, "comment": "To test it, append the landing page to the URL like this: #clickTag=http://www.google.hu", "clicktag": "\t<a id = 'creativelink' target = '_blank' class = System ></a>", "clicktagid": "creativelink", "postscript": "GEMIUS@postScript.js" }, "IPROSPECT": { "name": "IPROSPECT", "scripts": "ENGINE_CDN", "assets": "ASSETS_AUTOINLINE", "kilobytelimit": 200, "zip": true, "landingpage": true, "engine": "<script> var clickTag = ''; </script>\r\n", "clicktag": "\t<div id = clickTag class = System onclick = 'window.open( window.clickTag );' ></div>", "clicktagid": "clickTag" }, "ASSETSONLY": { "name": "ASSETSONLY", "scripts": "none", "assets": "ASSETS_ROOT", "zip": false }, "LOSSLESS": { "name": "LOSSLESS", "scripts": "ENGINE_CDN", "assets": "ASSETS_FOLDER", "zip": false }, "IDNES": { "name": "IDNES", "enginetype": "lite", "scripts": "ENGINE_CDN", "assets": "ASSETS_AUTOINLINE", "kilobytelimit": 200, "zip": true, "clicktag": "<a href = \"\" target = \"_top\" id = clickTag class = System ></a>", "clicktagid": "clickTag" }, "CLICKATTACK": { "name": "CLICKATTACK", "scripts": "ENGINE_CDN", "assets": "ASSETS_AUTOINLINE", "kilobytelimit": 200, "zip": true, "clicktag": "\t<div id = clickTag class = System onclick=\"mraid.open('${param_redirect_section1}');\" ></div>", "clicktagid": "clickTag" }, "ECONOMIA": { "name": "ECONOMIA", "scripts": "ENGINE_CDN", "assets": "ASSETS_AUTOINLINE", "kilobytelimit": 200, "zip": true, "clicktag": "\t<a href = \"\" target = \"_blank\" id = clickTag class = System ></a>", "clicktagid": "clickTag", "postscript": "ECONOMIA@postScript.js" }, "ADFORM": { "name": "ADFORM", "scripts": "ENGINE_CDN", "assets": "ASSETS_AUTOINLINE", "kilobytelimit": 200, "comment": "Adform is not limiting the ad size. Only the publisher", "zip": true, "landingpage": true, "timelimit": 30, "engine": "<script>document.write('<script src=\"'+ (window.API_URL || 'https://s1.adform.net/banners/scripts/rmb/Adform.DHTML.js?bv='+ Math.random()) +'\"><\\\/script>');</script>\r\n", "clicktag": "\t<div id = 'banner' class = System ></div>", "clicktagid": "banner", "postscript": "ADFORM@StandardAd.js" }, "MAINSTREAM": { "name": "MAINSTREAM", "scripts": "ENGINE_CDN", "assets": "ASSETS_AUTOINLINE", "kilobytelimit": 200, "zip": true, "clicktag": "\t<div id = 'clickArea' target = '_blank' class = System ></div>", "clicktagid": "clickArea", "postscript": "MAINSTREAM@postScript.js" }, "IBILLBOARD": { "name": "IBILLBOARD", "scripts": "ENGINE_INLINE", "assets": "ASSETS_AUTOINLINE", "kilobytelimit": 200, "zip": true, "clicktag": "\t<a id = 'creativelink' href = '' target = '_top' class = System ></a>", "clicktagid": "creativelink", "postscript": "IBILLBOARD@postScript.js" } } + AdForm requires a manifest.json (.zipped), filled with the information found above. postScripts.zip