retropunk

Hi Jake, check your dev console for errors. 2 small recommendations: DC also hosts GSAP and other libs, see here: https://support.google.com/richmedia/answer/6307288?hl=en Also, for banner ads try to ditch jQuery. You shouldn't need it. Good luck! - Patrick

@expint2006...I have used the Text plugins in the DOM with Animate CC Canvas underneath. You need to set it up correctly but the combination can be powerful.

There are plenty of JS Obfuscators around that will absolutely make it much harder for people to get at your code. I would start there and see how it goes. I've never used one so I'd be interested in hearing how it goes. Good luck!

awesome gears animation!

please star this topic if you haven't already https://bugs.chromium.org/p/chromium/issues/detail?id=596382 Thank you!

please star this topic if you haven't already https://bugs.chromium.org/p/chromium/issues/detail?id=596382

haha, I guess I misread your post and fixed everything BUT that

Great article by Cory. I totally agree that Animate CC and GSAP will once again rule the banner landscape. Hopefully this time using less CPU

Hi there. Welcome to the GSAP forum. I am sure Carl and gang will post some helpful starter links on GSAP and CodePen. In the mean time take a look https://codepen.io/SnapToPixels/pen/NNjGbq 1. You don't need to define the body tag in the HTML 2. scripts should be imported via the Pen Settings panel 3. Also, something I like to do with banners is set the visibility to hidden on the wrapper div and then at the beginning of the GSAP timeline I set the visibility back to visible. It helps with the flicker too. Hope that helps in the mean time. Here are some other links too: GSAP Getting Started http://greensock.com/get-started-js Here is a nice CodePen starter you can fork http://codepen.io/GreenSock/pen/PZdNMG I would also look at the GSAP CodePens. There are tons of easy to learn pens Good luck! - P

hmm, neither of the links load for me in Chrome on Mac. I am attaching the console errors.

Thanks Jonathan, I suspected it was dangerous. We have some developers that play fast and loose with GSAP and this helps me. That W3C link is perfect! Thanks for the quick response - Patrick

This is something I found out by accident. If you have a div id named "logo" You can target it with GSAP without defining a var or using the quotes '#logo' in the Tween This works and I was surprised because I didn't define a var: TweenMax.to(logo, 1, {scale:0.5}); Depending on what I am doing I will define the var var logo = getElementById('logo'); TweenMax.to(logo, 1, {scale:0.5}); or just TweenMax.to('#logo', 1, {scale:0.5}); Is this a happy accident or is it dangerous? Not sure why it would be dangerous but I wanted to ask just in case With my luck this was probably blogged about and I am behind the curve again Thanks - P

so not only are background-image animations jittery, text elements with a transform will also be blurry.

yeah thats very cool but I'm hoping that since this only seems to be a Chrome OSX only issue that it will be fixed (Chrome or GSAP) without having to do a workaround like that.

Interesting Blake, but that's for canvas right? This issue is CSS related. Chrome will be updated, transforming the background image shouldn't be any different from img tags.

Hey Carl, I wanted to comment because switching all images to use the img tag affects my current workflow greatly. I almost always use sprite sheets. All of the sprite sheet creation tools I have ever used, use background-image and background-position. My knee-jerk reaction is "how the heck do I switch to img tags?" ARGH! It never dawned on me to try img tags with sprite sheets, clip-path maybe? I only used background-image because thats what TexturePacker uses for CSS. I'll look to see if it can use the img tag but I don't think so. Anyways, just chiming in. Thanks - P

So for fun I added a bit more interactivity and 2 images. In the Standard profile there is a call to the game function. This should help you get started. Until the JSON issue is worked out in Animate just publish without sprite sheets. See if you can win! https://db.tt/bNtv3E4O

This is totally badass. I will be using this the first chance I get! Great job and thanks for sharing!

sure happy to help. As time goes by I'll upload new templates. This first set was literally the first 2 I created. As with all templates they will change and improve over time. Thanks! - Patrick

I'd be careful using 2 functions called windowLoaded() I suggest renaming your function in the FLA to something more appropriate to the methods inside startAnimation() for example You also don't need this extra load call. The body init is already doing this. Rename your function in the FLA to startAnimation and then move the function into the init via CreateJS in your Profile template. That will fix it function init() { $CJS_INIT stage.scaleX = stage.scaleY = window.devicePixelRatio || 1; console.log('window loaded'); document.startAnimation(); } - Patrick

@joe_midi that looks promising. Do you have access to any verbose examples on set up/workflow/creation? I would love to see more. A framework like this could go a long way in helping devs standardize their process. Thanks for sharing! Very cool

Upload your file and I'll take a look.

Also, if you create a profile similar to the ones I've included you can always include the JS imports and not worry about them being overwritten.

correct, Rich Media units in DC Studio use the Enabler.exit commands standard units use regular clickTags

Hey guys, I made an update to the template for both Standard and Rich Media. I forgot that when you are uploading the DoubleClick you need to use the DC GSAP link: https://s0.2mdn.net/ads/studio/cached_libs/tweenmax_1.18.0_499ba64a23378545748ff12d372e59e9_min.js I tweaked the retina scripts and added a small animation that shows how to target sprites using GSAP from the timeline or the main JS file. This is a work in progress so please report mistakes or any suggestions on how to do things more efficiently. - Patrick BannerMaster.fla.zip