Automatic Hover Effect | NO KEYFRAMES | Proximity Animation in After Effects
Expressions
Position
pointer = thisComp.layer("LAYER NAME");
hoverStart = 300; // The higher value, the larger zone of influence
hoverEnd = 100; The higher value, the smaller zone at which the influence will stop
maxValue = 2; // Multiplies the maximum value
L = Length(toComp(anchorPoint),pointer.toComp(pointer.anchorPoint)); // length(point1,point2)
C = clamp(hoverStart-L,0,hoverEnd); // clamp(value, min, max)
[value[0],value[1] - C*maxValue]
Opacity
pointer = thisComp.layer("LAYER NAME");
hoverStart = 80; // The higher value, the larger zone of influence
hoverEnd = 20; //The higher value, the smaller zone at which the influence will stop
maxValue = 0.7; // Multiplies the maximum value
L = length(toComp(anchorPoint),pointer.toComp(pointer.anchorPoint)); // length(point1,point2)
C = clamp(hoverStart-L,0,hoverEnd); // clamp(value, min, max)
0 + (C / hoverEnd) * 100
Want to create smooth hover effects based on proximity in After Effects? In this tutorial, I'll show you how to make a layer move and fade in dynamically as another object gets closer—no keyframes needed! We'll break down the distance-based animation using simple expressions like toComp(), length(), and clamp(). Perfect for UI/UX animations, motion graphics, and interactive effects!
🔹 What You'll Learn:
✅ How to calculate distance between layers dynamically
✅ How to create a hover effect that moves a layer smoothly
✅ What the parts in the expressions mean
✅ How to use clamp() to control the effect range
📌 Download the project file: (Will drop soon!)
👍 Like & Subscribe for more After Effects tutorials!
#AfterEffects #MotionGraphics #AEExpressions #HoverEffect #AEtutorial #NoKeyframes #DistanceBasedAnimation #AdobeAfterEffects #VFX #ProximityEffect #dynamicanimation
00:00 - Introduction
00:28 - Setting up Layers
01:13 - Adding Transform Effect
02:15 - Adding Expression
02:37 - Explaining Expression
02:48 - Defining Pointer
03:04 - Where the Trigger starts
05:59 - How high does the button go
06:31 - Defining Length parameter
06:37 - Defining clamp
09:48 - Final Calculation
10:08 - Total movement value
11:27 - Another example
#aftereffects #blender3d #ui #uidesign #uianimation