geedix

The problem is that the DOM doesn't know about things inside a canvas tag. You have to go through extra steps to manage tab focus and get some of that functionality back. This article looks like it might help you - https://codepen.io/servinnissen/post/a-somewhat-accessible-canvas

I'm still on this motionPath mask project, but trying to have the masked item move, too. First I tried having two motion paths. So the mask (with circle) and the image were on separate motion paths. The mask wouldn't stay in sync, even with the onUpdate method that Craig used to solve my problem with masking an image that's sitting still. Here's the codepen, based on the above: https://codepen.io/geedix/pen/WNEXYJW I have also tried doing something similar without motion paths, and I'm still having problems with the mask not taking effect, or being out of register. I tried looking at MotionPathPlugin.convertCoordinates , but it doesn't seem necessary here, since they're both root level elements, right? At this point I'm thinking this may be too much for SVG to handle, and maybe I'll try an AE/Lottie approach. But then again maybe I'm missing an easy solution.

Ah, thank you akapowl and Craig. True, the group tag version doesn't do it on Firefox. Proxy it shall be!

I am able to rotate a mask while it affects an object on a motion path: https://codepen.io/geedix/pen/WNEXwNE And I can tween a mask without a motion path, but I haven't been able to tween a mask on its own motion path. Possible? https://codepen.io/geedix/pen/BadmLza. thanks

Animate exports to canvas, which is just a bunch of pixels that can't be read by screen readers. It seems like a good idea to add fallback text and Aria attributes in the html. You might also use javascript to add keyboard access to interactive elements. I spent ten years building banners, and never heard a peep about accessibility. Glad to hear it's becoming a consideration. Anyone using a screen reader is probably using an ad blocker too, but you might as well add some text so they can read it if they want to. I don't imagine that ads (served in iFrames) would prevent a site from being ADA compliant, since they come from a different domain.

It depends on what the logo element is made of, but assuming it's SVG, you can target the fill of the path like fill: "#0000ff" https://codepen.io/geedix/pen/poPXKYP

Don't cry over spilt text! If you're using static text in Animate, you can go modify - break apart, then Modify - Timeline - Distribute to layers. With each letter on its own layer, you can do timeline animation, under a motion guide or whatever you need, with each letter being independent. Or, you could turn a string into an array of letters with javascript, then move them around with gsap, if you're more clever than I am right this morning.

That's working, thanks! Spaces can be better than commas in an SVG path? I would never have guessed it.

My codepen is copied from a bigger animation where other motion paths are working as expected. I've tried redrawing the paths for this one, but the "corner" element still doesn't align to its motion path without the offsets. Is it trying to wrap around to the left? Mystified as to why I need offsetX: 1545, offsetY:-112

Ah, so it's a Firefox thing! I've had this happen occassionally -- I go back and forth between Chrome and FF.

XD doesn't have html export, but it's good for SVG, and for prototyping animation. It has paid plugins to export html, but code I've seen from those looks too bloated for me. We did some banners that used dynamic html text in a div on top of canvas animation done in Animate. There should be an easier way to keep text consistently crisp with Animate, but I haven't tried it lately

I like Figma, Sketch or XD more than Photoshop for laying out banners and animations, but it's not a huge difference; you have to get your assets organized somewhere. I try to export everything aligned at 0,0. Keep transparent pngs at full banner dimensions (200% for crispness), logo, text, whatever -- the blank space doesn't add file size. GWD is popular for wysiwyg banners. I had to use it on a couple of inherited projects and I didn't like it, but maybe that's just me. Adobe Animate with canvas export is still used a lot, and could be your best option if you're doing intricate masks or animation that's best worked out on a timeline. Keep bitmap assets at 2x size in your Animate file (with more compression) and they'll be sharp on hi dpi screens.

GSAP in Animate works like it did in Flash. Just avoid moving an object with GSAP and the timeline at once. You've got a createjs.Ticker in there that can clash with gsap.ticker if you aren't clear about which one you want to be in control of your animation.

Ah well, "maybe try" anyway! ?. @aaronmaxdesign's gsap.pauseAll() is not a thing either, right? pauseAll() worked in TweenMax to target a timeline or tween, but pause() is what works with gsap3. Here's a pen using pause() for an ISI in a banner. https://codepen.io/geedix/pen/XWMLJBQ

There are lots of ways to auto-scroll an isi. It sounds like you were close with a gsap solution. I think pauseAll() is a v2 method, maybe try gsap.pause()?

Hi, here are two - https://jbradleyjohnson.net/work/hemlibra300x600/index.html and https://jbradleyjohnson.net/work/ocrev300x600_seemore/index.html

When I built pharma banners, if they were done with Animate I avoided gsap, and used create.js tweens instead, since that's what Animate is already loading. The scrolling ISI would be html, in its own div, above the canvas. Ideally that would use system fonts, but more often, we had to have brand fonts with specific weights and sizes determined not by the design team, but by the legal department. So we would make the text an image. Are you trying to animate the isi scroller?

I did banners for a long time, starting with Flash and continuing into the HTML5 days. I would say, "I can't build these without specs" and the project manager would find an outdated spec sheet for me. Most likely, your ads will run on Google. Could also be Sizmek, or Flashtalking, or site-served if it's a special placement. Not huge differences, aside from where you download libraries, and maybe different click tags. Sizmek might have changed after Amazon bought them. good luck!

This is an interesting topic for me too. I think the idea is that as long as your library is coming from the same CDN as the rest of your ad, then it's likely to already be cached on most clients. Due to "cache partitioning" on some browsers, there's no caching benefit from other domains, so you wouldn't be able to load from cdnjs or whatever without downloading a fresh instance every time. You should be getting specs from the publishers that you're building your banners for, that will give you file size limits and 3rd party library rules.

If you're not doing ad tracking, you can just wrap your arrow with a regular anchor tag in the html. No jquery needed.

The design is rough, so the little problems in the animation don't seem so noticeable. You could try out some different eases - https://greensock.com/docs/v3/Eases . Maybe the jerk in the motion is because the pixel values in your fromTo don't start over at the same place they end.

Hi, My guess is that you want a sheen going over just the rectangles, or maybe the logo. You could do that a few ways, like have the blue background actually be a foreground element (any transparent format like gif, png, svg), with the shapes cut out, then the animation would go behind it. Or try a diagonal shape behind an actual mask. For the button, check the clickTag specs for your ad network. For example, Google's: https://support.google.com/admanager/answer/7046799?hl=en Be patient, work on one part at a time, and try to be more specific with what you're trying to do.

Yes, 2x images work in Animate for achieving clarity on high-density screens. Place large images in your Animate file, scale them down in Animate, and use more compression to come out with roughly the same file size.

Your link shows a video, which of course is more than 150k. I'm assuming you'll be delivering HTML. The file size of GSAP isn't an issue for most ad networks if you use their CDN to load it, so you might as well use the latest and full version of gsap 3. The idea is that it will already be cached for most users, so it doesn't count against your total file size. Check the specs for the ad network you're using. For instance, here are Google Studio's CDN links: https://support.google.com/richmedia/answer/6307288

Hard to tell without more specifics. The adhelper template isn't likely to be causing your problem unless it's been filled in wrong. Do you see any errors in your browser's console window? Is there a script in your Animate file that's trying to load something? My guess is that there's a broken file path somewhere.