How to make a proximity effect in After Effects

A proximity effect makes layers react to how close another layer is. Dots in a grid swell as a cursor passes over them. Icons lift like a dock on hover. Cards tilt toward the pointer and settle again when it moves on. In Cinema 4D you would build this with an effector and a falloff. After Effects has no effector, but it can measure distance, and that is all a proximity effect needs.

This guide shows two ways: one expression you paste on each layer, and a panel that sets up the effector, the radius and the reactions in a few clicks.

The short answer

• One reaction, a handful of layers: a null as the effector and a short expression with length() and ease() on each layer.

• Several reactions at once, many layers, a visible cursor: MotionUI's Proximity tab, which writes those expressions for you and gives you sliders for radius and strength.

How a proximity effect works

Every version, scripted or not, has the same three parts:

1. An effector: the layer that moves. A null, a shape or a cursor graphic.

2. A radius: the distance at which the reaction starts. Outside it, nothing happens.

3. A reaction: what changes as the distance shrinks. Scale, opacity, position, rotation or blur.

Each frame, a layer checks how far away the effector is and turns that distance into a value between "no reaction" and "full reaction".

Method 1: build it with an expression

1. Choose Layer > New > Null Object and rename the null to Effector.

2. Animate its position across your layers, for example from left to right over three seconds.

3. On the first target layer, open Transform > Scale, hold Option (Alt on Windows) and click the stopwatch. Paste:

var effector = thisComp.layer("Effector");
var radius = 300;  // distance in px where the reaction starts
var grow = 40;     // extra scale in % when the effector is on top
var a = toWorld(anchorPoint);
var b = effector.toWorld(effector.anchorPoint);
var d = length([a[0], a[1]], [b[0], b[1]]);
var s = ease(d, 0, radius, grow, 0);
[value[0] + s, value[1] + s];

var effector = thisComp.layer("Effector");
var radius = 300;  // distance in px where the reaction starts
var grow = 40;     // extra scale in % when the effector is on top
var a = toWorld(anchorPoint);
var b = effector.toWorld(effector.anchorPoint);
var d = length([a[0], a[1]], [b[0], b[1]]);
var s = ease(d, 0, radius, grow, 0);
[value[0] + s, value[1] + s];

var effector = thisComp.layer("Effector");
var radius = 300;  // distance in px where the reaction starts
var grow = 40;     // extra scale in % when the effector is on top
var a = toWorld(anchorPoint);
var b = effector.toWorld(effector.anchorPoint);
var d = length([a[0], a[1]], [b[0], b[1]]);
var s = ease(d, 0, radius, grow, 0);
[value[0] + s, value[1] + s];

toWorld() turns both anchor points into comp coordinates, so it also works on parented layers, and length() measures the distance between them in x and y. ease() maps that distance to the extra scale: 40% at distance 0, nothing at 300 px or more, with a soft transition in between. The layer's own scale stays the base, so you can still animate it.

To use the same expression on other layers, select the Scale property, choose Edit > Copy Expression Only, select the other layers and paste.

Other reactions

Keep the first six lines and replace the last two. For opacity, apply it to Opacity and end with:

ease(d, 0, radius, 100, 30);

ease(d, 0, radius, 100, 30);

ease(d, 0, radius, 100, 30);

Layers near the effector are fully visible, layers far away drop to 30%. Swap the 100 and the 30 to fade out what the effector touches.

Make the radius adjustable

Hard-coded numbers are fine for one shot. To change the radius for every layer at once, add Effect > Expression Controls > Slider Control to the Effector null, rename it Radius, and replace the 300 in the expression with:

effector.effect("Radius")("Slider")

effector.effect("Radius")("Slider")

effector.effect("Radius")("Slider")

Now you can keyframe the slider and let the whole field grow or shrink over time.

Where the expression approach gets heavy

The scale expression above is written for 2D layers. A 3D layer needs a third value, value[2] + s. Pushing layers away from the effector needs direction vectors, and each new reaction is another expression on another property. Twenty icons with scale, position and blur means sixty expressions, and changing your mind means pasting them again. That is the point where a tool saves real time.

Method 2: MotionUI Proximity

MotionUI is an After Effects panel for UI and product animation. Its Proximity tab builds the same setup: an effector layer with sliders, and expressions on the target layers that read them.

1. Install MotionUI and open the panel under Window > Extensions > MotionUI.

2. In Proximity, pick the effector type: Null for an invisible effector, or one of eight cursor graphics if viewers should see the pointer.

3. Set the field. Radius is where the reaction starts. Inner Radius is where it reaches full strength, which gives you a flat top instead of a peak. Strength scales everything from 0 to 200%.

4. Click New Effector and animate its position across your layers.

5. Pick a preset (Grow, Shrink, Lift, Fade, Tilt, Slide or Focus), or tick the effects you want: Scale Up, Scale Down, Push Away, Pull Toward, Rotation Z, Slide with a direction, Fade Opacity, Reveal Opacity and Blur. Each has its own amount.

6. Select the effector and the target layers and click Apply.

The result is plain After Effects: an effector layer with Radius, Inner Radius and Strength sliders, and expressions on the targets. The project renders on any computer, with or without MotionUI. Keyframe Strength from 0 to 100 to fade the whole interaction in, or animate the radius to make the field breathe. Remove Selected and Remove All take the effect off again.

Proximity is part of MotionUI Pro at $19 a month or $168 a year, on macOS and Windows. For a complete walkthrough with a cursor and three cards, see how to animate a cursor hover effect.

Expression or effector: which one?

• Use the expression for one reaction on a few layers, when you like to see and own every line, or when you can't install anything on the machine.

• Use MotionUI when you combine reactions (grow and lift, fade and blur), work with dozens of layers, want a visible cursor as the effector, or need to tweak the feel after the client's feedback without touching code.

Ideas to try

• Dot grid: a grid of small circles that swell as a cursor moves through. Grow with a radius of three to four dots.

• App dock: a row of icons that scale up and rise as the pointer passes. Lift does this in one click.

• Card row: cards that tilt slightly toward the cursor in a product demo. Tilt, with a low strength.

• Spotlight: hidden labels that appear only near the effector. Set the labels to 0% opacity and use Reveal Opacity.

Tips for a clean result

• Size the radius to the spacing. A radius of two to three times the gap between elements makes neighbors react gradually instead of one at a time.

• Keep the reaction small. 10 to 30% extra scale reads clearly. More looks like a bug.

• Ease the effector, not the layers. The layers follow the effector, so smooth keyframes on its position give you smooth reactions everywhere. If the movement feels mechanical, better easing curves help more than a bigger effect.

• Check at output size. A reaction that looks right at full screen can vanish in a 1080 by 1350 social crop.

Frequently asked questions

Does After Effects have a proximity effector like Cinema 4D?

No. After Effects has no built-in effector or falloff for layers. You build the effect with expressions that measure distance, or with a plugin like MotionUI that sets them up for you.

Can a cursor be the effector?

Yes. With the expression, parent a cursor graphic to the Effector null or use the cursor layer itself. In MotionUI, pick one of the cursor graphics as the effector type.

Will the project render without the plugin?

Yes. Both methods use standard After Effects expressions, so the project renders on any computer and on a render farm.

Why do my layers grow from a corner?

Scale works around the anchor point. Center the anchor point on each layer first. MotionUI has a Center Anchor button for this, and the Proximity tab can center it when you apply.

Make your next interface react to the cursor: get started with MotionUI.