explorerzip

Posts like this tend to be targeted at managers, etc and not developers. It's only natural that they'd use language like "better performance, "more secure", "increase ROI" to try to get people to adopt it.

Not quite sure where you got the idea that Google was not allowing JavaScript in banner ads because the AMP itself is a JS library. A move by Google to disable all other third-party JS libraries would have huge ramifications for libs like our beloved @GreenSock, Create, etc. I get the concern that it could be a move by the Googs to lock people into DoubleClick / GWD, but we'll have to see what happens. That being said, I get the rationale for wanting to move development forward by increasing performance / load times of ads.

You don't typically show a restart button until the banner is finished playing at least once. You can set your restart button as "visibility: hidden" in css, which prevents mouse clicks. You can use something like TweenLite.set(restart, {visibility: "visible"} or TweenLite.to(restart, 0.5, {AutoAlpha:1}) when you're ready to activate the button. The AutoAlpha property simultaneously sets opacity: "1" and visibility: "visible"

Google Web Designer does have it's own timeline just like Adobe Flash / Animate. You can technically create animations using the GWD / Flash timeline and GSAP at the same time, but you might cause some conflicts like Shaun said. With these graphical tools I find it best to use them for layout only and use GSAP for animation only. Here's an old post from the forums that should help you insert GSAP into GWD. The exact steps might have changed since GWD is constantly evolving.

Are you referring to the IAB specs that specify a max frame rate of 24? https://iabcanada.com/content/uploads/files/IABCanada-AdGuidelines-English.pdf I've been dev'ing banners for years on ad platforms like DoubleClick, Sizmek and AdGear and have never had a scenario where I had to change the frame rate using Jack's or other methods. Banners made with GSAP or other tools should meet the specs for most if not all ad networks out there. Video files are a different story though and you'd have to change that in Adobe Premiere, After Effects, etc. The only scenario I can think of where you might have to change the frame rate would be where you're animating large numbers of elements at the same time and / or very quickly. In that case, it might be better to simplify the design and / or animation because you can never be sure of what the end user's device is going to be doing while the banner is playing. If your animation is too complex the end user might experience choppy performance.

Have a look at this article that is a light read, but still gets the point across: https://blog.iconfinder.com/how-to-make-animations-look-realistic-e7ea00792f97

GSDevTools can control play / pause, playback speed, etc. but it's only available for Club Greensock members. https://greensock.com/gsdevtools I used to work at a company that made their own testing environment and I think they used jQuery to make play / pause buttons, etc. The buttons would fire functions like myAnimation.pause, myAnimation.restart, myAnimation.timescale, etc. Sorry, but I don't have any example to share.

Another thing you might want to do is use a tween duration of 1 instead of 0.3 so it's easier to see / troubleshoot what is going on. Then use the ".timeScale" method to speed up or slow down your whole animation.

Have a look at this article about using the clip and clip-path properties in CSS. In short, css clip is deprecates, but will work in just about any browser including IE. Clip-path is the newer way of accomplishing the same thing, but with some newer bells and whistles. https://css-tricks.com/clipping-masking-css/ The tricky part with this technique is figuring out the correct values for top, right, bottom left because it's a lot of trial and error especially on non-rectangular objects. You can use the browser's inspector to manually change these values on the fly, but you'll want to disable any external or inline JavaScript code. I've found it best to use a TweenMax.to tween to change these values. You could end up with your object flashing on and off briefly when the web page is first loaded if you use a TweenMax.from tween. In your scenario: 1. Use clip: rect(0px, 0px, 0px, 0px) in CSS to make your object "invisible" on page load 2. Use a TweenMax.to tween to change those properties I also recently posted a thread about using the css clip to do exactly what you want; reveal and hide objects.

I know you've figured out the issue, but you might also consider putting your JS code in a separate file instead of within the HTML. Then call your external JS in a script tag at the bottom of your HTML before </body>. I've done this for years and it works perfectly fine with DoubleClick Studio and standard banners. Other ad platforms like Sizmek, AdGear should allow you to call external JS files too. Double check their docs obviously.

Dynamic content including images and live text is stored in a Google sheet. Naturally, you'll need a Google account with access to Studio. Your best bet is to follow Google's docs to properly code your ad: https://support.google.com/richmedia/answer/3526354?hl=en You can also contact Google to get help with their API. You can upload code to them and in some case they write large sections of code for you.

You can also animate an SVG line using CSS animations. It's more tedious and I much prefer using GSAP, but it can be done: https://css-tricks.com/svg-line-animation-works/

I think all you need to mention is that the position parameter also accepts variables. It just wasn't obvious from the docs.

It just didn't occur to me to use a math expression with variables for the position parameter e.g. duration - overlapDuration - gapDuration. It now makes sense from a programmer's perspective, but I thought I was limited to using values like: at an absolute time (1) relative to the end of a timeline allowing for gaps ("+=1") or overlaps ("-=1") at a label ("someLabel") relative to a label ("someLabel+=1") Perhaps you can state in the docs that you can use variables and math expressions like: "someLabel - anotherLabel - 1", etc.

Thanks so much for the assist Jack. I'll give this a shot with my real assets and let you know if it works. It must have took you a lot of trial and error to figure out the correct values for the variables? I didn't know you could use an expression like: "duration - overlapDuration - gapDuration" in the position parameter. But it now makes logical sense since I've been using relative values like "+=1" for ages. Might be worthwhile to update the official TimelineMax docs to call attention to this.

I'm trying to "convert" an Adobe Animate project to GSAP. As you'll see in my Codepen, the top and bottom "filgrees" (they are supposed to look similar to: https://goo.gl/images/GNQgRi) wipe one image and simultaneously reveal another image. The actual banner is more complicated because the filgrees and the images in the center are irregular shapes. My challenge is syncing the movement of the "filgrees" to the image wipe / reveal. The wipe / reveal is being done by tweening the css "clip" property. I know that the css clip property is deprecated on most browser, but I have to use it for Internet Explorer ? You'll notice that the image "wipes" slightly faster than the "filgrees." I know this is a timing issue since the filgrees are have further to move in the Y direction vs the images have to clip in the Y direction. Any tips on how to sequence these separate parts so there's no red background visible as they are moving.

You can ease into GSAP by using tools like Animate or Google Web Designer (GWD) for design work. I'm a hand-coder, but must admit that Animate is a much better than GWD since it's been around for far longer. Both products support let you insert GSAP code into them, which gives you the flexibility of designing with a GUI with the time-saving power of GSAP to tween everything. Once you get a hang of the GSAP syntax, you can move into pure HTML, CSS and JS.

You should not need over 1000 lines of code to accomplish this animation, which is relatively straightforward. I think the original developer of this banner ad was trying to make it responsive so that the assets resize and reflow according to the browser window, which makes the code more complex than it needs to be. I've done some experimenting with responsive ads and found it not worth the effort in getting it to work properly on different browsers. IMO, it's much more efficient to create individual sized banner ads since I don't have to go through such rigorous testing. Banners are not web-sites after all. It might be a lot simpler for you to redo this ad from scratch vs modifying someone else's code. You'll also get some valuable experience writing code on your own. You can write the HTML / CSS / JS from scratch or use a HTML boilerplate. In either case, you should only include what you need i.e. remove CSS, HTML or JS that you don't need thus making the code easier to read / maintain and for a smaller file size. Most banner ads like this should also not need jQuery, SASS, etc.

I think this line of code in your Animate file might be problematic. TweenMax.to(this.circle_mc, 1, {scaleX:50, scaleY:50, ease:Back.easeOut}) You're telling GSAP to scale your object by 5000%, which enormous. It could be that CreateJS (the HTML Canvas plugin bundled with Animate) cannot deal with such a large scaling factor and that causes the browser to pixelate the circle. I previewed your Animate file in Firefox and Chrome and they both have the pixelation issue. Not sure about this, but I think that objects rendered in HTML canvas are actually raster (aka bitmaps) even if you created them as a vector in Animate or Illustrator. I recreated your animated circle with vanilla CSS and your JS code and the scaling is not pixelated. Bear in mind that the JavaScript syntax is a bit different in that I can specify "scale: 50" instead of "scaleX: 50, scaleY: 50" as with Animate. It might also help to know what you're trying to accomplish with this animation.

That's a bizarre issue since objects you draw in Animate are vectors. Perhaps you can try to make a completely new Animate file and use the timeline to scale it up i.e. don't use GSAP and see if the problem persists.

If you're scaling up a JPG or PNG, it will become pixelated if you try to scale it. Animate does have some additional settings you can change, however. After importing image into Animate, right click on the asset and click Properties. You'll see the Bitmap Properties window. You can change options like Smoothing and Compression. Try changing Compression to "Lossless" and "Allow smoothing" to see if that helps. Keep in mind that your outputted file (SWF, HTML Canvas, etc) will be much larger as a result of changing the compression settings. The other way would be use vector image from so you can scale them up and down without loss of quality.

Try using Google's polite loading template at: https://support.google.com/richmedia/answer/2672514?hl=en You're also loading a number plugins that are redundant or you don't need. jQuery is not needed at all for a simple animation like this and TweenMax already includes TimelineMax, CssPlugin and easePack. You don't need to explicitly run them as you have in your HTML. It also looks like you're trying to use JavaScript to create a second CSS (polite.css) file. You should not have to do this because you can initialize everything you need in your global.css. While it's technically possible to load a second CSS file, I believe it's poor programming practice to do that especially in this case where you have very simple animation. Remember that efficiency should be your ultimate goal when building banners. As a result, you should only load plugins, scripts, css files, etc that you need. You can also contact Double Click directly through chat or email and can even send them your code. They will often write big sections of code for you.

Nice work @mikel You just need the GSAP guy (does he have an actual name?) to hold open the truck door with his tweening powers Future Marvel movie right there LOL

I tried to make something similar of a compartment door on a pick up truck and also tried using transformOrigin. I had a lot of problems getting it to work so I resorted to a sprite sheet. I was using PNG images instead of SVG, but the concept should work in your case too. Not sure if you used a sprite sheet before, but it's just a series of frames that you can make in Photoshop. You should be able to make one in Illustrator too. Frame 1 is the closed door and the last frame is the opened door. You'll have to figure out the in between frames. You then tween your door element with a steppedEase.config(x). Replace x with the total number of frames in your spite sheet. A spritesheet should work in every browser since you're not doing any transforms to the image.

I've always found the Animate interface clunky and buggy especially since I started hand-coding. Animate has far too many panels and you can accidentally move them out of place. Try pushing yourself more into pure hand-coding to avoid some of these issues. You'll obviously need to learn HTML, CSS and JavaScript, but it's worthwhile. Not sure what type of project you're working on, but the infinite looping could be an issue. If it's a banner ad, then you cannot have infinite looping animation of any kind. You either have to loop x amount of times or give the user control over the looping.