We Keep Coding

Animate blur filter with GSAP

I want to create some kind of zoom out animated effect using GSAP. What I'm trying to do is scaling an element from double its size to the normal size and apply a vanishing blur filter. The filter should start at blur(15px) and going down to blur(0).
I thought I could do it this way:
var el = $('img');
TweenLite.set(el, {
'webkitFilter': 'blur(15px)',
scale: 2
});
TweenLite.to(el, 0, {
autoAlpha: 1,
delay: 1.75,
ease: Power2.easeIn
});
TweenLite.to(el, 2, {
'webkitFilter': 'blur(0px)',
scale: 1,
delay: 1.7,
ease: Power2.easeIn
});
What happens, instead, is that the blur(0) gets applied immediately.
Here's a simple pen showing the problem.
What am I doing wrong?

Have you tried just updating to GSAP 1.18.4? Seems to work in your codepen. The CDN link to TweenMax 1.18.4 is https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.4/TweenMax.min.js

you can't really animate the blur filter, but you can set it. You can basically set up a timeline and use the progression of the timeline as the method to set the filter over the timeline duration.
below is update function that sets the blur over the timeline duration.
onUpdate:function(tl){
var tlp = (tl.progress()*40)>>0;
TweenMax.set('#blur img',{'-webkit-filter':'blur(' + tlp + 'px' + ')','filter':'blur(' + tlp + 'px' + ')'});
var heading = $('#blur h3');
heading.text('blur(' + tlp + 'px)');
}
here is a great demo made by Marzullo http://codepen.io/jonathan/pen/ZWOmmg

Angular.js move animation

I'm having hard time creating a rather simple move animation.
The effect I want to achieve is similar to this http://jsbin.com/vorub/1/edit?output (which I took from some other SO question).
Now I managed to do it using .animation()
Basically doing this
.animation('.move-to-top', [function() {
return {
addClass: function(element, className, done) {
var el = $(element);
var top = el.position().top;
el
.addClass('move-to-top')
.one('transitionend', function() {
setTimeout(function() {
el.css({
transform: 'scale(1.03) translateY(-' + (top+10) + 'px)'
})
.one('transitionend', function() {
setTimeout(function() {
el
.removeClass('move-to-top')
.css({
transform: 'scale(1) translateY(-' + (top) + 'px)'
})
}, 50);
el.prevAll('.timetracking-item')
.css({
transform: 'translateY(' + el.height() + 'px)'
});
});
}, 100);
});
}
}
}]);
where move-to-top class does this
.move-to-top {
#include vendor(transition, all 400ms ease-in-out);
#include vendor(transform, scale(1.03) translateY(-10px));
position: relative;
z-index: 999;
}
What it does is
add class which scales and move item up a bit
move the item to the top using js
move all previous elements that down to make space using js
remove class that added scaling
BUT that's just for the effect and it's done using transforms, which is of course undesirable, so I'd either need to "cleanup" after the transitions are done and remove trasnsforms and actually move the elements in DOM. Or do it completely differently.
Ideal would by orderBy & ng-move combo, but that would require ng-move to have some ng-pre-move, ng-after-move events, which it as far as I know, doesn't.
Or at least if you could use both addClass: fn() and move: fn() where addClass would fire first(while the element is on the old position), but you can't do this either(addClass doesn't fire when orderBy is applied).
The last option I can think about, and like the least, is broadcast some event from my .animation() after all the transitions are done and catch it inside controller, and sort the array then, but I'd need to remove the style attribute from all the items(to remove items) which could and probably will cause flickers.
Any other ideas?

The pre-move is apparently comming in 1.3 https://github.com/angular/angular.js/issues/7609#issuecomment-44615566
For now, what I've done was apply ng-if, which forces angular to re-render the whole list. Works fine.

Raphael setting transparent png opacity loses alpha channel

I'm using Raphael 2.1.0.
When I animate the opacity of a transparent PNG under IE8, the transparency animates well. ie: 'from' an opacity of 0.0 'to' an opacity of 1.0.
After the opacity animation has ended, I want to set/restore the image's position/opacity to a pre-animation state, but the alpha channel of the image becomes opaque. Where there was once a transparent background there is now a white square.
With an SVG renderer - Chrome and Firefox - things are fine. I've tried chaining the image, translation and alpha to no avail.
Here's the code:
var element = this._paper.image(image.Url(), 0, 0, width, height);
var removeOnStop = true;
var fromParams = {}
var toParams = {};
// From options
fromParams.opacity = options.from.alpha;
// ...
element.attr(fromParams);
// To options
toParams.transform = 'T300,300';
toParams.opacity = options.to.alpha;
// Animate
var anim = Raphael.animation(toParams, duration, 'linear', function() {
if (removeOnStop) {
element.attr({ opacity: defaultProperties.alpha });
element.transform('T' + defaultProperties.left + ',' + defaultProperties.top);
}
}).repeat(repeat);
element.animate(anim);
Any help would be greatly appreciated.

I tried the following
Animating the alpha, everywhere, but this causes null reference issues within Raphael
Chaining translate()/transform() and attr()
Applying filters directly to the object
Changing the order (attr before transform and vice versa)
In the end, the working solution is to translate AND set the opacity using attr:
if (removeOnStop) {
element.attr({ opacity: defaultProperties.alpha });
element.transform('T' + defaultProperties.left + ',' + defaultProperties.top);
}
became
if (removeOnStop) {
element.attr({ transform: 'T' + defaultProperties.left + ',' + defaultProperties.top,
opacity: defaultProperties.alpha });
}
Importantly, you must do this when initially creating the image and setting the initial opacity.
I hope this will save people future trouble.

How to combine jQuery animate with css3 properties without using css transitions?

In this example; i am trying to create a jQuery animation with css3 rotate property. I can manage this animation with css3 transition and jQuery css() but i want to do this with jQuery animate() for rotating deg value according to my jQuery variatons.
Is it possible use animate with css3 property value with jQuery 1.8.0?
Here is jsFiddle to inspect.
jQuery:
var rotateVal = 90;
//this method isn't working
$('.red').animate({
'transform':'rotate('+rotateVal+'deg)'
},500);
//this way works but i don't want to do this with transitions
$('.black').css({
'transform':'rotate('+rotateVal+'deg)',
'transition':'1s'
});​
html:
<span class="black"></span>
<span class="red"></span>
Edit: Vendor prefixes removed, like -webkit-. Thanks to Kevin B.

It is possible, but it isn't easy.
var red = $(".red"),
rotateVal = 90;
$("<div />").animate({
height: rotateVal
},{
duration: 500,
step: function(now){
red.css('transform','rotate('+now+'deg)');
}
});
This basically creates a fake animation of a detached div, then on each step, updates the rotation of the target div.
Edit: Oops! wrong argument order. Here's a demo. http://jsfiddle.net/qZRdZ/
note that in 1.8.0 i don't think you need to specify all the vendor prefixes.
Using this method, you can animate almost anything as long as you keep in mind that things like += and -= won't work properly unless coded for.
Update: Here's a combination of my solution and cuzzea's solution abstracted behind a function. http://jsfiddle.net/qZRdZ/206/
$.fn.rotate = function(start, end, duration) {
console.log(this);
var _this = this;
var fakeDiv = $("<div />");
_this.promise().done(function(){
_this.animate({"a":end},{duration:duration});
fakeDiv.css("height", start).animate({
height: end
}, {
duration: duration,
step: function(now) {
_this.css("transform", "rotate(" + now + "deg)");
},
complete: function() {
fakeDiv.remove();
}
});
});
return _this;
};
var red = $('.red');
red.click(function() {
if ( !$(this).is(':animated') ) {
red.rotate(45,135,500);
setTimeout(function(){
red.rotate(135,190,500);
},750);
setTimeout(function(){
red.rotate(190,45,500);
},1500);
}
});
});

Kevin is corect, almost. :)
Here is working jsFiddle.
You don't have to use another element and height, you can do something like:
var red = $('.red'),
max_rot = 45,
start_from = 90;
red.css({a:0}).animate(
{'a':1},
{ step: function(value,tweenEvent)
{
rotateVal = start_from + max_rot * value;
red.css({
'transform':'rotate('+rotateVal+'deg)',
});
}
},
1000);​
The ideea is simple. First we create a bogus css property 'a' and set it to 0, and then we animate it to 1, so the step function will give you a value of 0 to 1 that you can use to set the custom transform.

An alternative method would be to use jQuery to change the dom to something that css would respond to.
We can set our css to look like this:
.object {
-webkit-transition:all .4s;
-moz-transform:all .4s;
-o-transform:all .4s;
-ms-transform:all .4s;
transform:all .4s;
}
.object[data-rotate="false"] {
-webkit-transform:rotate(0deg);
-moz-transform:rotate(0deg);
-o-transform:rotate(0deg);
-ms-transform:rotate(0deg);
transform:rotate(0deg);
}
.object[data-rotate="true"] {
-webkit-transform:rotate(90deg);
-moz-transform:rotate(90deg);
-o-transform:rotate(90deg);
-ms-transform:rotate(90deg);
transform:rotate(90deg);
}
Our jQuery would look like this:
$('#trigger').live('click',function(){
if($('.object').attr('data-rotate') = true) {
$('.object').attr('data-rotate',false);
}
else {
$('.object').attr('data-rotate', true);
}
});
Obviously, the browser has to support the ability to transform whatever animation you want to run, so its its hit or miss depending on the type of animation, but its nicer to work with if you have a ton of stuff going on or you have some children you want to animate concurrently.
Example fiddle:
http://jsfiddle.net/ddhboy/9DHDy/1/

How to implement jquery like slideDown() in zepto

I am using zepto library for my mobile web site. I have recently learnt that zepto does not have slideDown() plugin like jquery. I would like to implement the same for zepto.
I have tried one on jsfiddle (http://jsfiddle.net/goje87/keHMp/1/). Here it does not animate while showing the element. It just flashes down. How do I bring in the animation?
PS: I cannot provide a fixed height because I would be applying this plugin to the elements whose height property would not be known.
Thanks in advace!!

Demo: http://jsfiddle.net/6zkSX/5
JavaScript:
(function ($) {
$.fn.slideDown = function (duration) {
// get old position to restore it then
var position = this.css('position');
// show element if it is hidden (it is needed if display is none)
this.show();
// place it so it displays as usually but hidden
this.css({
position: 'absolute',
visibility: 'hidden'
});
// get naturally height
var height = this.height();
// set initial css for animation
this.css({
position: position,
visibility: 'visible',
overflow: 'hidden',
height: 0
});
// animate to gotten height
this.animate({
height: height
}, duration);
};
})(Zepto);
$(function () {
$('.slide-trigger').on('click', function () {
$('.slide').slideDown(2000);
});
});​
​

This worked for me:
https://github.com/Ilycite/zepto-slide-transition
The Zepto Slide Transition plugin add to Zepto.js the functions bellow :
slideDown();
slideUp();
slideToggle();

Speransky's answer was helpful, and I'm offering a simplified alternative for a common drop-down navigation list, and separated into slideUp and slideDown on jsfiddle: http://jsfiddle.net/kUG3U/1/
$.fn.slideDown = function (duration) {
// show element if it is hidden (it is needed if display is none)
this.show();
// get naturally height
var height = this.height();
// set initial css for animation
this.css({
height: 0
});
// animate to gotten height
this.animate({
height: height
}, duration);
};

This would work for what you need:
https://github.com/NinjaBCN/zepto-slide-transition