Jump to content
Search Community

Do you use SVG Filters in ads?

leolo69 test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

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.

Link to comment
Share on other sites

I've had issues where you apply an SVG blur filter and try to tween the filter values as well as an issue if you were to then slide the element across the screen (this was a while back or so). From what I remember, some browsers were creating a "trailing" effect, leaving behind the remnants of that trail in the path that it took that stayed there after the tween too (Some browsers did it, other didn't). Think of it looking similar to onion-skinning. I was attempting to create motion blur effects at the time. It worked but had that garbage on some browsers (and didn't perform so great on some devices). Not sure if the same issue appears if you don't try to tween the filter values, try to slide it, or if you keep it static. Might be fine if you create a duplicate version of the element with blur and just fading that in and out overtop of a static version without the blur – rather than trying to tween the blur filter itself.
 

Link to comment
Share on other sites

6 minutes ago, davi said:

I've had issues where you apply an SVG blur filter and try to tween the filter values as well as an issue if you were to then slide the element across the screen (this was a while back or so). From what I remember, some browsers were creating a "trailing" effect, leaving behind the remnants of that trail in the path that it took that stayed there after the tween too (Some browsers did it, other didn't). Think of it looking similar to onion-skinning. I was attempting to create motion blur effects at the time. It worked but had that garbage on some browsers (and didn't perform so great on some devices). Not sure if the same issue appears if you don't try to tween the filter values, try to slide it, or if you keep it static. Might be fine if you create a duplicate version of the element with blur and just fading that in and out overtop of a static version without the blur – rather than trying to tween the blur filter itself.
 

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"!!! :-)

Link to comment
Share on other sites

I'm probably not the best guy to answer this because I haven't built ads in a LOOOONG time, but I'd say the biggest problem with filters is that they're very CPU-intensive for the browser to render. It's completely unrelated to GSAP - it's just the browser rendering that's rough. Blurs are especially problematic. You might be fine with limited use, but I'd recommend doing testing on various devices. 

 

Happy tweening!

  • Like 1
Link to comment
Share on other sites

3 minutes ago, GreenSock said:

I'm probably not the best guy to answer this because I haven't built ads in a LOOOONG time, but I'd say the biggest problem with filters is that they're very CPU-intensive for the browser to render. It's completely unrelated to GSAP - it's just the browser rendering that's rough. Blurs are especially problematic. You might be fine with limited use, but I'd recommend doing testing on various devices. 

 

Happy tweening!

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!

Link to comment
Share on other sites

So why not use a blurred version of your bitmap on a layer above, in Animate and fade that out. Or a semi transparent overlay that makes the underlying image appear to be blurry?

 

I did a semi transparent frost on a window overlay reveal for a holiday beverage ad, that was a vector from Shutterstock.

  • Like 2
Link to comment
Share on other sites

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.

Link to comment
Share on other sites

Curious as to the extra restrictive standards of this particular publisher.

 

We are supposed to be judged by the size of our zip files, and the js files compress nicely, or I would never have Animate authored banner ads that are only 20K zipped.

 

I just compressed my Animate authored beverage ad, that has an extra large image of the cocktail with holiday trappings, that ends zoomed out, and did have a transparent png created from that frost on a window vector from Shutterstock, and my zipped file for a 300x250 is 135K. Hardly a K weight monster in 2019.

 

My 2 bitmaps, a JPG and a TinyPNGed PNG, were 38K and 60K.  

 

 

Link to comment
Share on other sites

2 minutes ago, somnamblst said:

Curious as to the extra restrictive standards of this particular publisher.

 

We are supposed to be judged by the size of our zip files, and the js files compress nicely, or I would never have Animate authored banner ads that are only 20K zipped.

 

I just compressed my Animate authored beverage ad, that has an extra large image of the cocktail with holiday trappings, that ends zoomed in, and did have a transparent png created from that frost on a window vector from Shutterstock, and my zipped file for a 300x250 is 135K. Hardly a K weight monster in 2019.

 

 

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 :-) 

Link to comment
Share on other sites

1 hour ago, somnamblst said:

Curious as to the extra restrictive standards of this particular publisher.

 

We are supposed to be judged by the size of our zip files, and the js files compress nicely, or I would never have Animate authored banner ads that are only 20K zipped.

 

I just compressed my Animate authored beverage ad, that has an extra large image of the cocktail with holiday trappings, that ends zoomed out, and did have a transparent png created from that frost on a window vector from Shutterstock, and my zipped file for a 300x250 is 135K. Hardly a K weight monster in 2019.

 

My 2 bitmaps, a JPG and a TinyPNGed PNG, were 38K and 60K.  

 

 

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. 

Link to comment
Share on other sites

I can't say that I've heard of a "responsive sidebar ad" that responds to the size of the browser window. Nor have I seen any in my web browsing experience. Do you have an example we can look at?

This could be a difference in European vs North American terminology, but I think you're referring to an "expandable ad." Those ads feature a "collapsed state" like 300x250 and a button that lets the user manually expand to a pre-set size like 970x250. Expandable ads cannot automatically respond to the size of the browser window, however. Here is an example of a "LightBox" ad that floats on top of the web-site, but the principle is still the same http://www.richmediagallery.com/detail?id=13936 

 

In Google Double-Click, expandable ads are considered rich-media and you would have a lot more than 80KB to work with. Perhaps you can let us know your ad vendor  (DoubleClick, Sizmek, EyeReturn, etc) so we can look into your issue more.

Link to comment
Share on other sites

12 hours ago, explorerzip said:

I can't say that I've heard of a "responsive sidebar ad" that responds to the size of the browser window. Nor have I seen any in my web browsing experience. Do you have an example we can look at?

This could be a difference in European vs North American terminology, but I think you're referring to an "expandable ad." Those ads feature a "collapsed state" like 300x250 and a button that lets the user manually expand to a pre-set size like 970x250. Expandable ads cannot automatically respond to the size of the browser window, however. Here is an example of a "LightBox" ad that floats on top of the web-site, but the principle is still the same http://www.richmediagallery.com/detail?id=13936 

 

In Google Double-Click, expandable ads are considered rich-media and you would have a lot more than 80KB to work with. Perhaps you can let us know your ad vendor  (DoubleClick, Sizmek, EyeReturn, etc) so we can look into your issue more.

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.

Link to comment
Share on other sites

I'm not quite sure what you mean by "more sophisticated animations." In your example, you'll notice that the animations are simple and have the same movement no matter the size of the browser window. You can use something like TweenMax.from(element, 1, {x: "-=100%"}) and GSAP will do the calculations for you.

 

In your example, you'll also notice that everything except the background image are SVG's and relatively simple shapes. You can use a tool like https://jakearchibald.github.io/svgomg/ to compress those. You can also use a tool like TinyPng / TinyJpg to reduce the size of the background image.

 

I'm not sure what else we can do to help unless you can post up a simplified example of what you're trying to do on CodePen. I know you're using Animate, but this might be a good opportunity for you to learn how to hand-code since you're already using GSAP.

  • Like 1
Link to comment
Share on other sites

7 minutes ago, explorerzip said:

I'm not quite sure what you mean by "more sophisticated animations." In your example, you'll notice that the animations are simple and have the same movement no matter the size of the browser window. You can use something like TweenMax.from(element, 1, {x: "-=100%"}) and GSAP will do the calculations for you.

 

In your example, you'll also notice that everything except the background image are SVG's and relatively simple shapes. You can use a tool like https://jakearchibald.github.io/svgomg/ to compress those. You can also use a tool like TinyPng / TinyJpg to reduce the size of the background image.

 

I'm not sure what else we can do to help unless you can post up a simplified example of what you're trying to do on CodePen. I know you're using Animate, but this might be a good opportunity for you to learn how to hand-code since you're already using GSAP.

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. 

Link to comment
Share on other sites

It's definitely a super heavy effect, I wouldn't use it on anything at this time (stuff like this makes me miss Flash ? 
I'm on an iMacPro and I can tell it runs chunky and that's even with small things. Not quite ready to use these types of animated effects just yet.  
Here's a quick snippet to test it out >
 

function blurFromTo(_element, _start, _end, _duration, _ease, _delay) {
    _element._blur = {};
    _element._blur.amount = _start;
    TweenMax.set(_element, {
        webkitFilter: "blur(" +  _start + "px)", 
        filter:       "blur(" +  _start + "px)" });
    TweenMax.to(_element._blur, _duration, { 
        amount:_end,
        onUpdate:
            function() {
                TweenMax.set(_element, { 
                    webkitFilter: "blur(" + _element._blur.amount + "px)", 
                    filter:       "blur(" + _element._blur.amount + "px)" });
            },
        ease:_ease, 
        delay:_delay });
}


Google has a solution (and I do something similar in Animate CC), where they take a few blurred instances at different blur levels and fade them into each other over time. You can probably easily modify this to use GSAP as well. Still not a great solution but probably best case as of right now.
https://developers.google.com/web/updates/2017/10/animated-blur
https://github.com/GoogleChromeLabs/ui-element-samples/tree/gh-pages/animated-blur

Link to comment
Share on other sites

2 minutes ago, davi said:

It's definitely a super heavy effect, I wouldn't use it on anything at this time (stuff like this makes me miss Flash ? 
I'm on an iMacPro and I can tell it runs chunky and that's even with small things. Not quite ready to use these types of animated effects just yet.  
Here's a quick snippet to test it out >
 


function blurFromTo(_element, _start, _end, _duration, _ease, _delay) {
    _element._blur = {};
    _element._blur.amount = _start;
    TweenMax.set(_element, {
        webkitFilter: "blur(" +  _start + "px)", 
        filter:       "blur(" +  _start + "px)" });
    TweenMax.to(_element._blur, _duration, { 
        amount:_end,
        onUpdate:
            function() {
                TweenMax.set(_element, { 
                    webkitFilter: "blur(" + _element._blur.amount + "px)", 
                    filter:       "blur(" + _element._blur.amount + "px)" });
            },
        ease:_ease, 
        delay:_delay });
}


Google has a solution (and I do something similar in Animate CC), where they take a few blurred instances at different blur levels and fade them into each other over time. You can probably easily modify this to use GSAP as well. Still not a great solution but probably best case as of right now.
https://developers.google.com/web/updates/2017/10/animated-blur
https://developers.google.com/web/updates/2017/10/animated-blur
 

 

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! 

 

Link to comment
Share on other sites

2 hours ago, leolo69 said:

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. 

 

I've been making banners for years and have minimally used SVG's for simple shapes like CTA buttons, replay buttons, legal, etc. I have only used very simple SVG animations with GSAP like animating strokedasharray and strokedashoffset properties. All other assets are JPG, PNG and GIF.

 

From a workflow perspective, it is far easier to prepare and export image assets as JPG / PNG files. The biggest obstacle for me (and I'm sure many others) is creating / getting a properly formatted Illustrator file with shapes on their own layers, proper names, etc. You have to take these steps otherwise animating will be near impossible. After all that, you still need to use third-party optimization tools and will have a wall of SVG code in your HTML file.

 

I'd say that CPU usage is not much of a concern with banners because their design and animation tend to be simple.

 

There will be a much stronger case for SVG in banner ads once a) the workflow issues can be addressed by Adobe b) there are fewer cross-browser issues and c) more people start using hi density (4K and above) displays.

 

All this being said, I have to give huge kudos to the GSAP folks and the community for experimenting and smoothing out many of these SVG issues.

 

  • Like 2
Link to comment
Share on other sites

5 hours ago, explorerzip said:

I'd say that CPU usage is not much of a concern with banners because their design and animation tend to be simple.

CPU issues tend to be a huge concern in our banner development, because we're always trying to make unique animations that stand out from the templated banner crowd. Atmospheric effects, interactive elements, pans and zooms with large bitmaps, nested animations, masked type  — these things can cause processors to chug.

CPU drag was also a problem in the Flash days, but we could do the kind of vector effects that the OP is asking for in this thread; blurs and filters were available cross-browser, often at the expense of performance. 

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...