[Pause/kill timeline if function is called after label?]

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!

 

[Animating mask]

Isn't that the same thing I did?

[Animating mask]

You could do something like this: 

 

See the Pen YxeRzb by ohem (@ohem) on CodePen

 

[Reply button on Adobe Animate CC?]

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();
}

 

[Reply button on Adobe Animate CC?]

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 mask in Adobe Animate]

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.

[Ugh! Double scroll bars on my 300x250 on Washington Post]

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>

 

[Ugh! Double scroll bars on my 300x250 on Washington Post]

I would set the canvas to position:absolute.

[Mouseout Animation Fails When Testing with ADGEAR]

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

[Adding Line Breaks using Text Plugin]

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

[GSAP & Double Click Studio]

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.

[GSAP & Double Click Studio]

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

[GSAP & Double Click Studio]

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.

[Adobe Animate CC 2017 banner ad templates ready for AdWords]

So I did that. Resubmitted, and then got an error for how I was direct linking the ad to a URL instead of using "clickTag"... Yeah, I remember click tags from my Flash days. I get it. You gotta track those clicks.

The solution was (or appears to be) to add this script code to the HTML5 file (I put it below the <title>):

<script type=“text/javascript”> var clickTag = “”; </script>

And use this for the button code:

this.btn_main_link.addEventListener(“click”, fl_ClickToGoToWebPage);
		
function fl_ClickToGoToWebPage() {
window.open(“clickTag”, “_blank”);
}

... I believe that is correct. At least after doing that and resubmitting it, I didn't get any more errors.

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

[Error uploading HTML5 To adwords]

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.

[How can i add a border with a tween]

You can tween the border width like this: 

See the Pen NpOgJe%C2%A0 by anon (@anon) on CodePen

 

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: 

See the Pen vapGt by jonathan (@jonathan) on CodePen

 

Same thing works for borderRightColor, borderTopColor, etc.

 

Check out this thread for more information: https://greensock.com/forums/topic/8880-border-width-easing/

[Cascade animation onclick expand on a video banner]

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/

[Best Place to View HTML5 Banner Portfolios]

Moat.com use to be a great place to see display in the good old days of Flash. You used be able to hover over ads and see the animation. Looks mostly static now. 

 

Here are some Father's Day ads I did recently:

http://cwiens.com/curt/shutterfly_fathersday_2016/

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

[Validate your banner]

 

By the way: could someone please explain me how SIZMEK calculating the ad size? Because what I see as their ad size indicator, nohow reflecting my actual file sizes.

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.

[Micro jumps (antialiasing) at the end of tweens]

I think this is smoother: 

See the Pen wJKvrN by anon (@anon) on CodePen

 

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%);
}

[Yoyo opacity off and on, but end on.]

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!

[Yoyo opacity off and on, but end on.]

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!

See the Pen RpPXaO by anon (@anon) on CodePen

[Reversing scale and cross-dissolve tweens: AnimateCC + GSAP (cross-post of sorts)]

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

[Trouble with Cory Hudson's sample files]

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.

[Animate CC and text, something to be aware of]

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.