tizenketto

I just made a little function for apllying css filters and put a demo on Codepen. http://codepen.io/tizenketto/pen/ZGzOjj All the filters except dropshadow use one function. Dropshadow is a special case since it accepts four parameters (offset-x offset-y blur-radius color). I left out spread but will update that soon. I wanted to make it appear like a light is moving in front of the image and casting a variable shadow. Any help improving this is always appreciated.

Thanks for that Jonathan. I did this for Blur based on yours. Just call it from onUpdate with "self", start blur value, end blur value. function blurt(tl, start, end ){ var tlp = (tl.progress()*100) >> 0; if (start < end){ var inc = start + Math.abs(start - end)/100 * tlp; }else { var inc = start - Math.abs(start - end)/100 * tlp; } TweenMax.set(tl.target,{'-webkit-filter':'blur('+(inc)+'px)', 'filter':'blur('+(inc)+'px)'}); } });

I did this based on another post I saw here. http://codepen.io/tizenketto/pen/OPGepQ/ //blur function blurt(tl, start, end ){ var tlp = (tl.progress()*100) >> 0; if (start < end){ var inc = start + Math.abs(start - end)/100 * tlp; }else { var inc = start - Math.abs(start - end)/100 * tlp; } TweenMax.set(tl.target,{'-webkit-filter':'blur('+(inc)+'px)', 'filter':'blur('+(inc)+'px)'}); } }); Just call the function onUpdate with parameters onUpdateParams: ["{self}", starting blur, ending blur] so onUpdateParams: ["{self}", 0, 4] this blurs from 0px to 4px. So in the sample the text transforms and blurs in and out with the duration of the tween. I will do this with other css filters.

I have an svg animation (created with Blender). It is a chained animation that loops (repeatCount="indefinite"). I want it to play once and stop. Since it is a frame animation, setting to each animate tag's repeatCount="1" leaves the previous displayed. Can I use GSAP to send an endElement()? Is there a good way control the playback? here is a link to the svg: http://www.prime37.com/images/u1.svg