Jump to content


iOS 7 Control Center Background Blur Effect

Recommended Posts



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?

Link to comment
Share on other sites

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.




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

Link to comment
Share on other sites

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


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

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.