leolo69

Have a look a codrops.com. There you can find many examples like the one you posted. It's an extremely helpful website with good code examples and explanations. https://tympanus.net/Development/HorizontalSmoothScrollLayout/index2.html

I love using GSAP but Adobe Animate is also a very powerful tool for the banner production. To be honest i never saw the need to combine the two techs. The line animation above can easily be accomplished with Animate CC without having to add GSAP to it. lines.fla.zip

Very interesting. Try using a slider to operate the image compression. At first i didn't check that it was a knob. I find a slider way more intuitive. Keep the good work.

(Sadly) i had a similar experience. After building several very time consuming cartoony like ads (moving eyes, fingers e.g.) for a campaign. For the next job the same client asked for nearly static ads with only fade-in-outs. What should i say. His media company told me the later static one outperformed the first campaign. But as we all know - there is good animation is there's bad.

And it's not only faster but more accurate. Right now i'm working on a responsive sitebar ad (300x600 initial and then all the way 100% width and 100% height responsiveness) For us as ad developer it is quite logic that to do so you have to make some compromises. There will always be some width and height combinations which just look let's call it unfortunate but you have to accept that. Though it's hard to explain the effort you have to put in a responsive ad to make it work 98% acceptable. Often you fix one element / animation overlap which results in another problem for other size variations. Very annoying. I'm always happy when the client himself prefers various static sizes before the one big responsive ad.

It's the first time i see Flexitive. By the look of it (e.g. interstitial ) responsive resize can be handled. But to be honest, 30 EUR a month on top of everything (Adobe, Provider ...) would be way too much for my kind of banner business. I like to code (wanna-be)responsive ads by hand so if something goes wrong i usually know where to find the culprit.

I do mostly banner for the financial sector and for that clientele i can say that business is not as good as it used to be. The good old flash days are long over. Often clients ask for responsive ads (so they can use the same ad for many placements) but only offer small budgets. But when you tell them that by setting up the ad to be responsive you have to develop multiple views (e.g. via mediaqueries) and that this development requires its time. They're not always happy about the cost estimate at all. This is something i have to fight against. Maybe other ad-developers have similar or - i hope - way better experiences.

Sometimes i use 4 divs like in this example. https://css-tricks.com/body-border/

Happy to help. Often less is more and i always have to remind myself, that at the end the message is what's important. So it has to be visible very quick. Animation should put emphasis on the message you want to deliver and never distract from it.

Maybe it would look nice if the letters were to resize from a smaller size to the end size. Also using e.g. three planes which fly staggered could be some idea. So the animation doesn't take that long to finish and you get some more action Just my two cents.

I already told the client that i'll work with two images (One blurred and sharp version of the image) and do a simple fade. Regarding the file size i tested svg-mask. Quite impressive. Normally i use Animate CC to mask a compressed jpg. So i can have "lightweightness" and transparency together. Thank you again for you help!

Thanks somnamblst. I'll look at those. I just was curious if anyone who uses svgs in ads encountered problems. I think the cpu usage is the main obstacle.

Thanks for your response. The example i send is an example the publisher provided and not something i set up. My intial question was about svgs especially blur filter and if someone uses filter often and could share his experience. The sitebar question was me looking for someone who is familiar with this ad format. A while back i did some very detailed cartoon style animations (many separate png-pieces pro cartoon-person and responsive typo animations) .. that was something i would call more sophisticated animations. I'll surely try the tipp you gave with the positioning. Many thanks.

Yes, there might be a difference between terminology. I have made a few expandable ads also. But the dynamic/responsive Sitebar is a beast of its own. Look here https://www.united-internet-media.de/de/showroom/adgallery/ad-live-preview/paypal-gmx-sitebar/livepreview.html . The challenge is, that the user can scale the browser as he pleases and the ad has to do its magic to look always fine. If you only use plain fadeIn/Outs you can get away with pure css, but if the animations and texts are more sophisticated than you are stuck with mediaqueries, calculating ratios (height/width)... Really a pain in the ... The 80/100kb limits came from the media agency which are in contact with the publishers. Though Sizmek and others sometimes accept heavier files at the end the owner of the site the ad is published on has the last say.

Have you ever setup a responsive sitebar? Here in Germany it's a popular format. Minimum size ist e.G. a 300x600 halfpage and from there you can change its size by changing the browser size. In Animate i solved it by using an onResize handler and various if statements regarding browsersize and ad-width-to-height-relation. Hard to explain to the agency that responsiveness is not build in in every ad from the beginning.

Yes, but with 135k i would be already arguing with the agency. Like: "But other web designers meet the limit. Why can't you???!" As i mentioned i have to develop a responsive sitebar. The main image is quite huge. And and all the other assets aren't even considered. It's just sad that publishers still use kb limits from 2010 for Flash- ads. I send the project manager to deal with the kb-trolls. Let's see what he can achieve

I do a lot of banners in Animate. Especially when you have to develop very sophisticated animations, i feel more at home in Animate (began with Flash 3) The problem i see in Animate is not the blurred image itself. There a a few things. Depending on the animations Animate produces a huge JS file. By huge i still think of the 80 kb limit size of my publishers On the other in Animate you have to get creative to make a responsive sitebar. I don't want an ad that resizes only proportional! So i wanted to give it a try with GSAP which i like especially when animations are straightforward. As svg filter seam to use a lot of cpu i tried playing with some blurred jpgs. Kinda of works but the designer liked the idea of letting big letters be somehow underneath the keyvisual (a kissing teen couple) . But just a tiny part. Now i have to think of masking the text to be able to use only jpgs. Grr.. The idea of a semitransparent overlay sounds interesting. Thank you. Will do some testing there too.

I ask myself so often why i still keep building banner. There are so many problems and bugs and you're never on the save side! NEVER! I'll do some testing but as i mentioned before, the ad is also responsive which ads also its part to potential problems. We'll see. Thank you!

Yes, thanks. I'll try to suggest that only a fadein/out is possible. I only hope that no browser will strike as the timeline is quite challenging too. And fingers crossed the client doesn't try to look at the banner with windows 7 and ie8 and all of the sudden the ad is "FAULTYYYYY"!!!

Hello folks, i'm handcoding banners by using GSAP or setting them up in Adobe Animate. Adobe Animate produces - apart from the essential external javascript class - also often a huge js file. So this time a few responsive sitebars are needed and some publishers ask me kindly to be within their 100 or even 80 kb size limits. Which is sadly very annoying. The designer developed a storyboard where at the beginning a blurred image appears. Then this image fades out and the sharp version appears. Just like a camera focus. I will be using transparent pngs and GSAP. The above mentioned size restriction are more than a challenge. Now my quesiton. Do any of use svg filters like "blur" on transparent pngs and do i have to be aware of any potential problems? Thank you in advance.

Top!!

Nice. Thanks for explaining your approach. I thought of setting up a similar logic. Fortunately at the moment no client requires Adwords-ads...

Hi Oliver, good to hear. I suppose your legal text fits right into the ad or do you implement some kind of "starwars-autoscroll" for large amount of text as you cannot use a normal scrollbar functionality?

Thanks Oliver16Years. Good point. The coordinates approach is clever and a new feature which has to be tested very thoroughly. I just posted a related question in the adwords forum. When i receive a substantial answer i'll share it here.

Hi there, as i'm also forced to show a specific legal text in my ads, this development makes me sweat quite a bit. did you find something? thanks