Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
fripi

e-advertising headache - HTML5 banners

Go to solution Solved by Jonathan,

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

Hi everyone,

 

as intro I'll tell you that my job is to make banner, I produce hundreds every month and it's easier in flash as I've no coder formation.

 

Many years ago I discovered GS and it changed my life! I learned the basics of tweenlite and adapted my workflow.

 

But now with firefox blocking flash, followed by chrome (1 september 2015) it isn't a choice anymore, everything must go HTML5...

It takes me a lot of time to do it in html5, it's always too heavy  (50k in flash, 300 in html5) and everything isn't possible with my knowledge of js (light effects, particles, alpha masks...)

 

But here I am with a big client which has a campaign running this summer and in september, with the news of firefox and chrome they want me to adapt everything, and there's a tint effect.

 

I already adapted the animation, compressed the png with tinyPNG but the background must change color every 1500ms, I've setup an array of colors, i've setup the setInterval, I've read and tried some demos I found here in the forums but my js knowledge is really not enough to know what to do next, tried cache, tried loading filters... nothing works.

 

Is there a cdn for ColorFilter and ColorMatrixFilter?

 

So can someone check my files?

The tint code is from line 94 to 114 so not very much

 

Sorry for my english and I must still learn how to use codepen, but I have a campaign to adapt in 3 days so I couln't wait longer to ask for help. Thanks

AT_300x250_html5_v2.zip

  • Like 1
Link to comment
Share on other sites

Hello fripi, and Welcome to the GreenSock Forum!

 

Since you have to get all your Flash banners converted to GSAP and HTML5. Here is some code that can help you with Cross Browser CSS Filters, that work in both webkit and non webkit browsers. It performs a browser check to make sure if the browser is Chromium based or not. Since most CSS Filters in Chrome and Safari require the -webkit- prefix. The browser check also takes into consideration the new Opera 30, which is now fully using Google Chrome render engine build for new Opera 30.

 

Example:

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


 

var isChrome,
    isChromium = window.chrome,
    vendorName = window.navigator.vendor,
    isOpera = window.navigator.userAgent.indexOf("OPR") > -1;
if(isChromium !== null && isChromium !== undefined && vendorName === "Google Inc." && isOpera == false) {
   // is Google chrome 
   isChrome = true;
} else { 
   // not Google chrome 
   isChrome = false;
}

var timeline = TweenMax.to({}, 2, {
  onUpdateParams:["{self}"],
  onUpdate:function(tl){
    var tlp = (tl.progress()*100)>>0;
    if(isChrome == true){
       TweenMax.set('#tint img',{'-webkit-filter':'sepia(1) hue-rotate(' + tlp + 'deg)'});
    } else {
       TweenMax.set('#tint img',{'filter':'sepia(1) hue-rotate(' + tlp + 'deg)'});
    }
	
	  var heading = $('#tint h3');
    heading.text('sepia(1) hue-rotate(' + tlp + 'deg)');
  }
});

$(document).on("click", "button", function(){
  timeline.restart();
});

This can be adjusted to do various CSS filters

 

Reference:

 

http://bennettfeely.com/filters/

How to target specific color(s) uisng CSS Filter Tint: http://stackoverflow.com/questions/29037023/how-to-calculate-required-hue-rotate-to-generate-specific-colour

 

Also please note that the disabling of Flash plugin to Ask to activate is only a temporary measure, and once Mozilla and Google are satisfied with the security patch issued by Adobe, they will allow Always Activate by default again. This was stated on recent Google and Mozilla blog bulletins.

 

:)

  • Like 4
Link to comment
Share on other sites

Hi,

 

thanks for the tip, it's perfect for css filters indeed, but it seems difficult to use this "hue-rotate" with the exact 5 collors of my array, I can not use just any random color, but must stick to the brand/campaign colors and the fade between.

 

Media agencies are not selling this as a temporary solution, they want to push it and "ban" flash because of adblockers and because it's dubbel work to setup a campaign for desktop with flash and on mobile with jpgs... thay have all kind of reasons.

Link to comment
Share on other sites

Nice work, guys. I just wanted to chime in and say that from my understanding, the Flash blocking is **not** going to be temporary, at least in some browsers. I believe Chrome announced that it'll implement a "click to play" technique in September which has the whole banner ad industry in a panic (understandably so). Obviously we think GSAP is the go-to choice now for banner ads, especially because so many networks have GSAP on their CDNs and don't count its file size against you. We'll be writing about that more soon. 

 

Anyway, good luck with your jump from Flash into the HTML5/JS pool! I think you'll [eventually] like it but there will certainly be growing pains. 

 

Oh, and also note that CSS filters are not supported in all browsers consistently. I'm pretty sure IE doesn't support them at all which is part of the reason we haven't officially supported them in GSAP either. SVG filters, however, are pretty well supported in browsers these days.

  • Like 3
Link to comment
Share on other sites

Hi @fripi,
 
I tried running your project and couldn't get it to work. Some of the CDNs are wrong, and there were a lot of errors about the "bg", which I don't think is declared.
 
I have no experience with Easel, so I really can't offer much help in that department. I know you probably don't want to start over, but if it comes to that, I would suggest checking out Pixi.js. It's a pretty powerful canvas/webGL library, and is used in serveral other canvas projects like the Phaser game engine. I'm not trying to suggest that one is better than the other, but it might be worth your time to at least check Pixi out if this is the type of work you are going to be doing in the future.
 
I'm not going to lie. Learning Pixi can be hard because the documentation isn't that great and there aren't too many examples to learn from. However, once you understand it, you can do some amazing things with it. Basically everything you listed in your first post is on Pixi's example page: light effects, particles, alpha masks, filters, color matrix, etc. Another nice thing about using Pixi is that you don't need to use a plugin to get those effects working with GSAP.
 
Examples: http://pixijs.github.io/examples/index.html?s=filters&f=filter.js&title=Filter

Bunnies: http://www.goodboydigital.com/pixijs/bunnymark/

 
About your project… I'm a little confused about what you are trying to do with the background color. Are you just trying to change the background color, or actually tint an image? Those are two pretty different things, and I couldn't tell by just looking at your code.
 
Like I said before, I don't know anything about Easel, but tinting is pretty easy to do in Pixi with GSAP's ColorPropsPlugin. In case you're curious, I created a little demo using the array of colors from your project.

 

See the Pen vOVjOR by osublake (@osublake) on CodePen

  • Like 3
Link to comment
Share on other sites

  • Solution

As Jack had mentioned that CSS Filters are not supported in IE, but SVG Filters are. So to get true cross browser support for Filter Tint, you can use SVG feColorMatrix. You can use GSAP to basically animate the value attribute of the feColorMatrix tag using the AttrPlugin.

 

This is really cool because feColorMatrix uses the transformation matrix to manipulate the color values. The below should work Firefox, Chrome, Safariin, and IE10 and above:

 

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


 

TweenMax.to("#hue1feColorMatrix", 2, { attr:{"values":100} });

And the html:

<svg width="100%" height="100%" viewBox="0 0 538 196" preserveAspectRatio="xMidYMid meet" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> 
  <defs>Using feColorMatrix for Tint FX</defs>
  <filter id="hue1">
        <feColorMatrix id="hue1feColorMatrix" in="SourceGraphic" type="hueRotate" values="0" />
 </filter>
 <image xlink:href="/img/1a-small.jpg" width="538" height="196" filter="url(#hue1)" />
</svg>

Reference:

 

SVG feColorMatrix: https://developer.mozilla.org/en-US/docs/Web/SVG/Element/feColorMatrix

W3C SVG Filters feColorMatrix: http://www.w3.org/TR/SVG/filters.html#feColorMatrix

W3C feColorMatrixElement: http://www.w3.org/TR/SVG/filters.html#feColorMatrixElement

Can I Use  CSS Filters: http://caniuse.com/#feat=css-filters

 

:)

  • Like 5
Link to comment
Share on other sites

Wow, nice work Jonathan! 

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.
×