ohem

Hi, I'm working on a project that uses a photo gallery component in Google Web Designer (required for my current job). I also have a GSAP animation that occurs before the gallery appears, and that works perfectly, but now I'm being asked to add an animation at the end of the gallery cycle too. That works fine too (see reduced code example below), but I just want to prevent the ending animation from occurring if the user has already interacted/is interacting with the gallery. var endTime = (galleryCycleTotalDur + galleryCycleDelay)/1000 + 2; var tl = new TimelineMax(); tl .to(".anim-intro-img", 0.5, {autoAlpha:0}, 3) .from(".anim-main-content", 0.5, {autoAlpha:0, force3D:false},"-=0.25") //the gallery is included here .addLabel("endIntro") .to(".anim-intro-img", 0.5, {autoAlpha:1}, endTime); So now I have it set up in GWD to call a function ("cancelPromo") on MouseOver, but I'm not sure how to set up that function to pause the second part of the timeline. I hope this makes sense. Any suggestions are much appreciated!

Isn't that the same thing I did?

You could do something like this:

Make sure your instance names match up. replay not reply. Since you're using scripted animation with GSAP and not the Animate timeline, you should use this.replay.addEventListener("click", clickToReplay.bind(this)); function clickToReplay() { tl.restart(); }

If you're doing timeline animation, all you need to do is create a replay button symbol, give it an instance name of "replay" and add this code & your button to the end frame: this.replay.addEventListener("click", fl_ClickToGoToAndPlayFromFrame.bind(this)); function fl_ClickToGoToAndPlayFromFrame() { this.gotoAndPlay(1); } Be sure to put the replay button on a layer above your clickTag button or the replay functionality won't work. Also, you have to use a button and not target the whole canvas... that issue comes up a lot on the Animate CC forums: https://forums.adobe.com/message/8720575

Shape masks are definitely possible, but it does seem that animating a mask via script isn't possible at this point. You can control masks with regular timeline animation though.

Last year, I had the same problem with some banners I built in Animate (still Flash CC at the time), and using absolute positioning fixed it for me. I only noticed the scrollbars after uploading the banners to my portfolio and seeing them appear when the banners were opened within a lightbox; they looked fine the rest of the time in regular iframes. Animate now positions the canvas absolutely in their default templates so it should be done automatically, but it looks like you're using an older template/older version of Animate. The newer templates include this: <canvas id="$CANVAS_ID" width="$WT" height="$HT" style="position: absolute; display: $CANVAS_DISP; background-color:$BG;"></canvas>

I would set the canvas to position:absolute.

Just targeting the entire canvas directly solves the iframe mouseout detection issue. No buttons needed.

SplitText is only 8kb zipped; really not bad to include in a banner.

BTW, for DoubleClick rich media banners, you can get a starter file here: http://www.richmediagallery.com/tools/starterfiles#tplGeneratorPath:inpage%2F300x250%2Fimage%2Fborder%3Dfalse~ This is all you need to "build in studio"; just add your animation/code & upload your zip to studio once it's final.

Using Studio is still more expensive because your creative is going to be counted as rich media, whether or not it actually is.

Even though setting up the files isn't very different, I believe it is significantly more expensive to traffic ads through Studio. I've worked for a company that had been using Studio instead of DCM for all of their standard banners (they just didn't know any better), and it was apparently something like triple the cost. If you're not doing rich media, it's generally better to stick with DCM.

With Adwords, the whole banner is clickable by default, so you don't even need to add a clickTag like you would with DCM. All you need is the ad size meta tag and the Google-hosted CreateJS library. Adwords requirements are here, for reference: https://support.google.com/adwords/answer/1722096#otherhtml5

Hey Pensketch, Adwords only accepts ads with Google Fonts if they're called via the <link> tag like <link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet"> Linking directly to the woff file at the gstatic domain will result in a rejection. You could try using the link tag in your HTML file instead, or just using static text instead of dynamic. I use static text in all my Animate the banner ads and it barely increases the file size of the JS file.

You can tween the border width like this: http://codepen.io/anon/pen/NpOgJe It may not work across all browsers though, so you can tween the borderTopWidth, borderRightWidth, borderBottomWidth, and borderLeftWidth properties individually for cross browser support. Example from Jonathan: http://codepen.io/jonathan/pen/vapGt Same thing works for borderRightColor, borderTopColor, etc. Check out this thread for more information: https://greensock.com/forums/topic/8880-border-width-easing/

Are you using Adform for your banner or a different ad serving company? That example uses a component: http://support.adform.com/documentation/build-html5-banners/adform-html5-api-components/panelflip/

https://moat.com/ now displays HTML5 ads, too!

Sizmek calculates the ad size based on your zipped ad size plus the size of your backup image. (Pretty annoying that they include the backup image in the calculation.) They used to only calculate the largest asset in the zip which was awesome, yet inaccurate.

I think this is smoother: https://codepen.io/anon/pen/wJKvrN I used force3D false instead of true, and added a slight rotation to the tweens. It actually seems smoother without this part on my end: #banner, #banner * { backface-visibility: hidden; filter: grayscale(0%); transform: translateZ(0%); }

Okay, I feel dumb. Yeah, that works lol. I knew it would be something simple but I didn't realize it was that simple. Thanks for the quick response!

Hi, I'm sure this is very simple, but I haven't quite figured it out. I want to add a flicker effect to an element that's already visible. I want it to flicker off and back on a few times, but when it ends, I want it to stay on. What would be the best way to achieve this? I could add a separate tween once it ends, but I'm sure there's probably a way to do it within the existing tween. Thanks for any insight!

"scale" isn't a property in canvas. You need to use scaleX and scaleY.

Those templates are outdated; Adobe has made some changes to publishing since then. If you're using Animate CC 2017, older templates won't work. The best thing to do going forward is to reset to the default template, export it, and add back in any custom code such as linking to TweenMax, clicktags, the adsize meta tag, etc. Then re-import it and you're good to go.

Weird; I can't replicate it on my end. Text pasted from Illustrator still breaks apart properly when I publish... I checked the JS files too.