[Tween CSS filter attribute]

Hello Jonathan,

 

I made some adjustments, changing the url of image and the order of window.onload call. Now you see something?

[Tween CSS filter attribute]

Hello Jonathan,

 

I don't have android mobile, but when i emulate (i know, its not the same thing) your config in my chrome desktop, it works. Maybe the "window.onload" can be the problem.

 

Note: When animation is done, the image is hidden. 

 

As i said, any improving is appreciated. 

[Tween CSS filter attribute]

Hello,

I made some code based on tizenketto pen. It's cross-browser and filters can be overlapped. This is the main code trigger:

var tl = new TimelineLite();
    tl.fromTo( progressEase, .5, { progress:0 }, { progress:1, ease:Strong.easeOut, onUpdate:cssFilterTween, onUpdateParams:[ "{self}", { target:image, filter:"blur", start:0, end:4 } ] } );

Check the full code here: 

See the Pen gaPqeK by jeanpaze (@jeanpaze) on CodePen

 

I hope this help someone and will be nice to see this as a GSAP plugin. Feel free to improve!