iOS 7 Control Center Background Blur Effect

[Buzzafett 2 Likes (Newbie)]

Hi,

 

Need help with adding blur to a background using GreenSock, in a similar way to the vertically swiping Control Center screen in iOS 7.

 

At the moment we're having to add blur to every single movie clip behind the main layer.

TweenMax.to(container.mc, 1, {blurFilter:{blurX:20, blurY:20}});

.

What we need is for the foreground layer to blur 'anything' that appears behind it, not just the elements we specify.

 

Is this even possible?

[Carl 11,108 Likes (Superhero)]

If you need to detect that the foreground menu is overlapping other objects you will probably have to run some sort of collision detection routine.

 

http://sierakowski.eu/list-of-tips/39-collision-detection-methods-hittest-and-hittestobject-alternatives.html

 

There is nothing in the GreenSock API that can handle this sort of detection.

 

To blur multiple objects at once there are generally two approaches

 

1: place them all in the same container and blur the container

2: create an array of all the objects you want blurred and pass that array to a blur tween

var mcs = [menu, nav, home, house, car];
TweenMax.to(mcs, 1, {blurFilter:{blurX:20, blurY:20}});

From your post I'm guessing you need something a little different and dynamic

[Buzzafett 2 Likes (Newbie)]

Hi Carl, thanks for taking time to answer my question.

 

I think we'll go with the array method for now.