[Tween CSS filter attribute]

I just made a little function for apllying css filters and put a demo on Codepen.

See the Pen ZGzOjj by tizenketto (@tizenketto) on CodePen

 

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.

[Tween CSS filter attribute]

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)'});
	}
});

[Blur filters]

I did this based on another post I saw here.

 

See the Pen OPGepQ by tizenketto (@tizenketto) on CodePen

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

[Controlling a chained SVG animation]

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