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

Famous Angular animation

In the below famous angular code, the animation works at the first click, but not at the second click or thereafter.
What code is missing that will make this work at every click?
Thanks!
Js
$scope.animate = function(index) {
$scope.list[index].rotate.set(Math.PI * 4, {curve: Easing.inOutElastic, duration: 3000 })
};
HTML
<fa-grid-layout fa-options="myGridLayoutOptions">
<fa-modifier ng-repeat="item in list"
fa-origin="[0.5, 0.5]"
fa-align="[0.5, 0.5]"
fa-rotate-z="item.rotate.get()">
<fa-surface fa-background-color="item.bgColor" fa-click="animate($index)">
{{item.content}}
</fa-surface>
</fa-modifier>
</fa-grid-layout>

Since you already Transitioned to (Math.PI * 4), that is now the current state of the rotation so there is nowhere to Transition to. Transitionables do not accumulate, in other words. Reset the Transitionable back to the original state, then Transition again.
$scope.animate = function(index) {
$scope.list[index].rotate.set(0);
$scope.list[index].rotate.set(Math.PI * 4, {curve: Easing.inOutElastic, duration: 3000 })
};

Overriding units on a jQuery Knob does not redraw correctly on page reload

I have a readonly jQuery Knob. I have been able to add units to the numeric display (as per How to display units with Jquery Knob ), but the foreground (ie. graphical value indicator) of the dial is no longer displayed when the page is reloaded.
Here's my HTML:
<input class="knob" id="workload" data-angleoffset=-125 data-anglearc=250 value="{{ workload }}" >
( {{ workload }} is a floating point Django template value - it is being substituted correctly )
Inside my jQuery ready function, I have:
if (jQuery().knob && ! App.isIE8()) {
// Workload Indicator
$(".knob").knob({
'dynamicDraw': true,
'min': 0, 'max':100,
'thickness': 0.2,
'tickColorizeValues': true,
'readOnly': true,
'skin': 'tron',
'fgColor': '#F00',
'inputColor':'#3D3D3D',
'bgColor': '#3D3D3D',
'width' : 150,
'draw' : function () {
$(this.i).val( parseInt(this.cv) + '%');
}
});
}
fgColor was originally set from the template value, but the above code with a hard-coded fgColor produces the same result.
Commenting out the draw callback works as expected: The knob is drawn complete with a numeric value in the middle and a red colored indicator on the outside arc.
Uncommenting the draw fixes the numeric formatting (no decimal points + a percentage sign). The numeric formatting remains correct for initial display and on re-load.
However the red arc only appears on the initial display - it disappears when the page is re-loaded!
So what is going on? Is draw over-riding jquery-knob's own canvas draw method? If so, how can I call the graphical draw part?

I was able to use this:
$('.knob').val(0).trigger('change').trigger('draw');

Here is the solution, sent to me by Sally Maughan (not of this parish):
$(".knob").each( function () {
this.value = Math.round( this.getAttribute('value') );
}).knob({
'dynamicDraw': true,
'min': 0, 'max':100,
'thickness': 0.2,
'tickColorizeValues': true,
'readOnly': true,
'skin': 'tron',
'fgColor': wcol,
'inputColor':'#3D3D3D',
'bgColor': '#3D3D3D',
'width' : 150,
'draw' : function () {
this.i.val( this.cv + '%');
}
});
The above version uses a new value from the HTML with each reload.
If you want to keep the same value through the reload, then Sally suggests replacing the this.value assignment with:
this.value = Math.round( this.value.replace('%','') );

Change the backgorund color according to mouse movement

is there a simple code in Html, javascript to change the complete backgroundcolor of the screen according to where the mouse is. The colors should fade to another, no hard interruption. Just a smoove transition.
thanks

You can listen to the mousemove event and do some logic calculations based on position and window size. How that logic should be is up to you, but I made a quick example for you (using jQuery):
var $win = $(window),
w = 0,h = 0,
rgb = [],
getWidth = function() {
w = $win.width();
h = $win.height();
};
$win.resize(getWidth).mousemove(function(e) {
rgb = [
Math.round(e.pageX/w * 255),
Math.round(e.pageY/h * 255),
150
];
$(document.body).css('background','rgb('+rgb.join(',')+')');
}).resize();
The rgb array is the array where I store the RGB values that should be applied, and then I just change the values based on where the mouse position is.
Demo: http://jsfiddle.net/WV8jX/
​

You could set the event onmouseover on each element. For example you can set a function called changeBackground(int code). In each element you set a code to know which color you want to set.
For example you could have the following:
<div name="myBackgroundDiv">
<div onmouseover="changeBackground(1)"/>
<div onmouseover="changeBackground(2)"/>
<div onmouseover="changeBackground(3)"/>
</div>
and in changeBackground function you can specify to change the background color of "myBackgroundDiv" depending on the number passed.
You can review this and this.
Best regards,

jQuery multi-draggable

Edit#1:
Since I asked this problem, I made a script which allows the elements to move together, but with problems. :(
$(this).append(
$('<div class="elem '+classes+'" style="width: 210px; height: 30px" data-modby="'+ui.draggable.attr("data-for")+'"><p>'+text+'</p></div>')
.resizable({
grid: 10,
maxHeight: 120,
maxWidth: 600,
minHeight: 30,
minWidth: 210,
containment: ".box-section"
})
.draggable({
grid: [10,10],
containment: ".box-section",
scroll: false,
helper: "original",
start: function(event, ui) {
posTopArray = [];
posLeftArray = [];
if ($(this).hasClass("r-active")) {
$(".elem.r-active").each(function(i) {
thiscsstop = $(this).css('top');
if (thiscsstop == 'auto') thiscsstop = 0;
thiscssleft = $(this).css('left');
if (thiscssleft == 'auto') thiscssleft = 0;
posTopArray[i] = parseInt(thiscsstop);
posLeftArray[i] = parseInt(thiscssleft);
});
}
begintop = $(this).offset().top;
beginleft = $(this).offset().left;
},
drag: function(event, ui) {
var topdiff = $(this).offset().top - begintop;
var leftdiff = $(this).offset().left - beginleft;
if ($(this).hasClass("r-active")) {
$(".elem.r-active").each(function(i) {
$(this).css('top', posTopArray[i] + topdiff);
$(this).css('left', posLeftArray[i] + leftdiff);
});
}
}
})
);
The actual problem is the moved elements have to stay in the containment box (called .box-section and if I have a single element it works fine. Also if i have two elements has not the same width, if i pick the sorter one and drag, I can pull out the longer of the container.
Also, if I move them fast (like a ninja) they will slip, and they won't be in the same grid they used to be.
30 percent solved since:
I'm going to make a new thingy which can drag and drop items to a box, and resize them.
My problem is that, I can't make them move together. But with some rules.
Rule one: They must move based on a 10x10px grid.
Rule two: They can't move outside their frame.
(Resize is an issue which i simply can't imagine, so I don't care about it, resize will be later)
I made a fiddle for it here: http://jsfiddle.net/9fueY/ you can see this.
In the right side, you can see inputs and a and a checkbox (and on hover a button).
The checkbox is the draggable object, drag it to the image. Now you have some text or a star appeared on the left.
If you type anything to the inputs, it refreshes the text.
OnHover the right boxes you can see a button. By clicking on it, will make a clone of the first element. Drag it inside.
If you click to a right-side box, it will glow blue. Click to two boxes on the right, makes all the two textfields glow blue in the image.
Now this is the case when i want them to move together. :D
What's your opinion, what should I do with this?
Thank you very much. - Répás

There is a plugin i developed for dragging elements together. Please do use it if it makes sense.
https://github.com/someshwara/MultiDraggable