flysi3000

We'll be doing some of that at the event here in NYC on the 20th, from what I gather. I'll post findings here, as I'm able, after the event.

It's not that they're not allowing JavaScript in banners, but that AMPHTML Ads only allow <amp-***> specific components, like <amp-carousel> and <amp-accordion>, and some inline css animation; you can't write your own JS, and no external assets via <script> or <link> tags as far as I understand. So no, you wouldn't be able to use GSAP in an AMPHTML Ad. Being unable to use your own JS, and the fact that everything lives on Googles servers is the reason they are touting these as more secure. I got invited to a thing at Google here in NYC later this month; hope to learn more then...

Yeah, as a group here where I work, we're very interested to learn more about this, as it will force us to diverge dramatically from our current build processes and animation techniques - aka what gives us our special sauce.

I've seen those spec sheets and I'm convinced they're old holdover relics from days gone by. Either that, or they refer to video. I think you're safe to ignore that.

I haven't experienced this yet, but not looking forward to it. I much rather use hand-rolled, or Animate if/when it makes sense.

You guys are the best. I'll do the easy fix for now (deadlines and such), but it's good that I experienced this, so I will definitely keep it in mind for the future!

Ok, here's a codepen demo. Let the animation play all the way through until the strokes disappear; then click the rewind button - the lines redraw, and nothing happens during the makeWaves() part of the animation. Then suddenly, the wavesOut() part of the timeline kicks in and they transition out. Weird, right?

@PointC the timeline restarts, but nested animation doesn't seem to play. I will try and cook up a demo and see if I can replicate what's going on on my end. Thanks for the suggestion about .onOverwrite, @GreenSock, I will give that a shot as well.

Hey! Longtime user, sometime-poster. I'm working on some ads that have a replay button. I have a secondary animation that plays at the beginning of my main timeline. That secondary animation is generated by a function that returns a timeline, and is called using add(). Secondary animation looks something like this: function makeWaves() { var tl = new TimelineLite(); tl .add('start', 0) .fromTo('#wave1 .teal', 10, {drawSVG:"0 35%"}, {drawSVG: "0% 95%"}, 'start') .fromTo('#wave1 .navy', 10, {drawSVG:"35% 100%"}, {drawSVG: "95% 100%"}, 'start') .fromTo('#wave2 .blue', 10, {drawSVG:"0 30%"}, {drawSVG: "0 90%"}, 'start') .fromTo('#wave2 .navy', 10, {drawSVG:"30% 100%"}, {drawSVG: "90% 100%"}, 'start') .to('#wave3 .blue', 10, {drawSVG: "80%"}, "start") .to('#wave3 .navy', 10, {drawSVG: "70%"}, "start+=2"); return tl; } Main timeline looks like this: this.timeline .addLabel("start", 0) .to(this.miranda, 0.6, {autoAlpha: 0}, 3.5) .add("f1", 3.7) .add(makeWaves(), "f1") //... more awesome animation When I hit the replay button, which calls timeline.restart(), my secondary animation doesn't fire. I tried setting timeline.restart(false, false) to avoid suppressing callbacks, but no dice. I also tried using exportRoot(), but I've never really been 100% sure how that works. Maybe I'm misunderstanding the use-case for this feature? Anything jump out at you guys that I might be missing? This seems implausible, but any reason using drawSVG would be part of the problem? I might try to put up a CodePen, but this is agency work, which is NDA'd by default, so I don't think I can share it publicly. Thanks guys!

Holy smokes - that's fantastic. I knew there had to be a way to tween movie clip frames... Thanks @Carl!

@davi yep, that's exactly my problem. Main Animate CC timeline has only one frame; I have a couple of nested clips with manual animation. Might follow your suggestion of making child clips into graphics. Thanks!

Throw up a codepen link so we can see what you're seeing and help troubleshoot, if you're able.

Okay, so I have myself a hairy little situation here. I have a banner, built in Animate CC. All the animation is mostly contained in a TimelineMax, except for a couple of bits that were just easier to do as nested movieclips. I'm controlling those sub animations with "gotoAndPlay", from functions in the main animation tl. All that works great - except we have a pause/play/replay function in the banner that controls the main timeline, but not the sub clips. What's the cleanest way to get the sub animations to pause/play along with the main tl? Thanks!

This is great, @Gedas. Definitely tons of useful stuff in there, particularly calling out the helper functions, which I'm sure a lot of people miss. I might just have to fork my own version of the repo and make some custom templates.

Hey @joe_midi, I've been doing some research into git hooks, and of course your medium post about it comes up as one of the prominent results. I was wondering about your setup - we generally create a new git repo for each campaign as well; are you pushing from each campaign to a single bare repo on the server? If I understand bare repos correctly, there's no working tree, so there's no issue with pushing from multiple repos > a single repo, correct? Thanks for the clarification!

Totally understandable - Bannertime is a great tool, but the docs are pretty sparse. SmartObjects are just normal JavaScript objects that you can use to create HTML elements. By default they will create <div> elements, but you can add a 'type' option and set it to 'img', for example, then give it a 'src' option, and it will generate an <img> tag for you. My workflow is usually like this: - extract assets from Ps, Illustrator (or whatever format your assets are in), preferably @2x resolution. - create SmartObjects in Bannertime - one object for each element that is going to make up the banner - initialize object states in the setup() method - for example, hide elements that should be hidden when the banner loads, eg. - start animating in the animate() method. You don't have to worry too much about Gulp, unless you're doing some custom stuff (eg. adding your own tasks, etc.). When you're ready to deploy/deliver, just type 'gulp prod' at the command line and you'll get a folder full of zipped up banners, ready to deliver. The one thing I wish were different, is the way backups are generated. You can generate backup images for your ads by typing 'gulp backup-gen' at the command line, but it automatically saves them into the /images folder for each ad, thereby adding to the final k-weight. ProTips: Image paths that you pass in to the "preload" section will be preloaded. If you want to limit the preloaded assets, just load the asset on-demand You can group elements in a container div by creating an empty SmartObject and setting the child objects' parent to the container element the properties of each SmartObject are basically css props, so you can pretty much add anything you would add to an element in css. Z-index, color, background-position, etc. Just make sure you use JavaScript format (eg. backgroundPosition, backgroundSize, etc.) That's all I can think of off the top of my head at the moment - if you think of any specific questions, please, don't hesitate to ask! EDIT: Thought of one more thing! Spend some time staring at the banner.js file - that's where the SmartObject is defined, and that will give you some hints as to all the features that they have. For instance, you can type something like myElement.set({autoAlpha: 0}), or myElement.centerHorizontal(), etc.

There's a bit of a learning curve, but if you use Bannertime, you can choose DoubleClick as the platform you're using, and it will scaffold out the files you need, including the appropriate include of DoubleClick's Enabler.js. It also sets up polite loading, clicktags, etc. I love no having to think about any of that stuff.

Hey! Welcome to the glamorous world of banner dev! Re. Bannertime, I love it. It removes the issue of preloading/polite loading, and the various clickTag implementations from the equation, and lets you focus on animation. The presentation of the banner centered in the browser is just so it looks nice when being reviewed by clients or art directors; this has nothing to do with how it will look when it's iframed in its placement on a publisher's website. Bannertime's smartObjects are great too, in that they have some built-in functionality, like centering either horizontally, vertically or both; a toggle for setting retina quality, using svgs or embedded bitmaps, etc. Tons of convenience built right in. Oh - if you ever build ads with Bannertime for one format (eg. DCM) and need to change them later, you can just generate a BT ad for the new format, and copy/paste the contents of banner.loader.js into the existing version, and you're done. It would be nice if ad platforms provided up to date templates, but I find that I mostly like using my own, or, especially since the new version came out, Bannertime.

Thanks for all the helpful suggestions, guys. I ended up using @jonathan's suggestion of putting the border on its own layer outside of the banner div, and everything's fine.

Hi - this isn't a strictly GSAP related question, but you guys are wicked smaaaht, so I thought I'd ask here. (Incidentally, I'm using the fantastic Bannertime generator from @joe_midi, but this isn't related to that either). I have a object that's centered in the browser window using a combination of negative margins and absolute positioning. When resizing the browser window, the border flickers on the right and bottom edges in Safari only - it's fine in Chrome and Firefox. The structure of the object is as follows: <div class="banner"> <div class="border"></div> </div> The .border div is 2px smaller than its parent element, to account for the 1px border all around, and it's this border that flickers when the browser is resized. I have a demo of this in action here. Again, I see this behavior in Safari only. I would love any suggestions as to how I can prevent this from happening. Thanks, guys!

Awesome! I'm glad that helped - I had a similar issue a while ago, and bead my head against a wall for a long time before I figured it out. Love that northern lights effect, too - gonna have to keep that technique in my back pocket for future reference!

Hey @sousinho - have you seen this post? You might be missing some info in your svg tag. Also, check that your svg tags aren't malformed. Hope that helps!

I have a helper class that I reuse (derived from that css-tricks.com link in the previous reply) that looks kind of like this: .center{ top: 0; bottom: 0; left: 0; right: 0; margin: auto; } I also have one that centers only horizontally and one that centers only vertically, and I apply them to my divs (or svgs) as needed.

Thanks for this great post, @Cory. Question - when I uncheck "export images assets", Animate CC seems to not only stop exporting assets on publish, but it also messes with the references to my sprite sheets as well. I end up with a series of "file not found" errors in the resulting code. I'm trying to avoid having Animate CC overwrite my already-compressed sprite sheet. Any workarounds for this? Thanks!

Thanks, @carl. Yeah, it's a new one all around. I'll post back with what I learn, as I can only imagine that since the web in general is moving towards becoming more accessible, this will come up again.