Filter Animations
Filters are where things get really fun. These are visual effects that change how your layers LOOK rather than just how they move. Want that retro CRT monitor vibe? Pixelated transitions? Old film grain? This is your playground.
The Filter Family (7 Visual Effects)
1. Blur
Makes things go from crystal clear to blurry (or vice versa). Basically the "adjust focus" knob for your theme.
How it works:
- Start Value: 0 (sharp) to 100 (super blurry)
- End Value: Where you want it to end up
- Smoothly animates between the two
Cool uses:
- Depth of field: Blur the background to make foreground pop
- Dream sequences: Fade from reality to blur for dreamy vibes
- Focus transitions: "Here's what we're looking at now"
- Speed effects: Blur stuff flying past
- Intros: Start blurry, sharpen into view
Settings to try:
Soft reveal:
Start: 20, End: 0, Speed: 2.0s, Easing: None
Fast blur out:
Start: 0, End: 50, Speed: 0.5s, Easing: Power2.In
Dreamy float:
Start: 0, End: 15, Speed: 3.0s, Loop + Yoyo
Pro tip: Subtle blur (5-15) often looks better than going full blur (50+). Unless you're going for that "lost my glasses" effect!
2. Pixelate
Turns your smooth graphics into chunky pixels. Instant retro gaming vibes.
How it works:
- Start Value: 1 (normal, no pixelation)
- End Value: Higher numbers = chunkier pixels (10+ gets REALLY blocky)
- The math gets weird at high values, so experiment!
Cool uses:
- Retro transitions: Fade between screens with pixelation
- 8-bit effects: Make modern art look old-school
- Glitch aesthetics: Sudden pixelation for digital error vibes
- Resolution changes: Simulate loading screens
- Arcade themes: Chef's kiss for MAME/retro systems
Settings to try:
Gentle retro:
Start: 1, End: 5, Speed: 1.0s
Heavy pixels:
Start: 1, End: 15, Speed: 1.5s
Glitch flash:
Start: 1, End: 20, Speed: 0.2s, Yoyo
Constant retro look:
Start: 4, End: 4, Speed: instant
(Just set it and leave it!)
The vibe: Your theme just got a Game Boy filter
Warning: Super high values (50+) can make text unreadable. Keep it usable!
3. Grayscale
Removes all color, making things black and white. Film noir energy unlocked.
How it works:
- Start Value: 0 (full color) to 1 (complete B&W)
- End Value: Where you want to end
- 0.5 = half color, half grayscale (faded color effect)
Cool uses:
- Flashbacks: Color to B&W for memory sequences
- Dramatic moments: Suck the color out for intensity
- Unselected states: Gray out non-active items
- Classic film: Old movie aesthetics
- Focus effect: Gray everything except one colored element
Settings to try:
Flashback transition:
Start: 0, End: 1, Speed: 2.0s, Easing: None
Pulse color:
Start: 0, End: 0.7, Speed: 1.5s, Loop + Yoyo
Quick desaturate:
Start: 0, End: 1, Speed: 0.3s
Creative idea: Combine with opacity for a "ghost" effect!
4. Old Film
Adds that scratchy, grainy, flickery old film projector effect. Like watching a movie from the 1920s.
What you get:
- Film grain
- Scratches
- Vignetting (dark edges)
- Slight sepia tone
- Random flicker
How it works:
- Start Value: 0 (normal) to 1 (full old film effect)
- Usually you just set it to 1 and let it do its thing
- The scratches and flicker are randomized automatically
Cool uses:
- Silent film themes: Perfect for Charlie Chaplin vibes
- Horror themes: Creepy found footage feel
- Historical systems: C64, Amiga, early PC themes
- Vintage branding: Old-timey aesthetic
- Nostalgia: "The good old days" feeling
Settings to try:
Full vintage:
Start: 0, End: 1, Speed: 1.0s
Flickering in:
Start: 0, End: 1, Speed: 2.0s, with slight flicker
Constant effect:
Start: 1, End: 1
(Just turn it on!)
The vibe: Your grandpa's home movies
Pro tip: Works AMAZING with black and white images. Add some grayscale filter too for maximum vintage!
5. CRT
Simulates those old tube monitors and TVs. Scanlines, curvature, the whole nine yards.
What you get:
- Scanlines (those horizontal lines)
- Screen curvature (slight barrel distortion)
- Phosphor glow
- Authentic CRT screen appearance
How it works:
- Start Value: 0 (modern flat screen) to 1 (full CRT effect)
- Includes curvature and scanlines
- Looks best at 1 (full effect)
Cool uses:
- Retro computing: Apple II, Commodore 64 themes
- Arcade cabinets: MAME perfection
- Console themes: Atari, early Sega, Master System
- Hacker aesthetics: Terminal/DOS vibes
- 80s/90s nostalgia: "Be kind, rewind"
Settings to try:
Classic CRT:
Start: 0, End: 1, Speed: 0.5s
Boot-up effect:
Start: 0, End: 1, Speed: 2.0s
(Like a TV warming up!)
Full-time CRT:
Start: 1, End: 1
The vibe: You just found your old CRT monitor in the garage and it STILL WORKS
Best with: Pixel fonts, low-res graphics, DOS prompts, retro UIs
6. Tilt Shift
Creates that miniature/toy effect by blurring the top and bottom while keeping the center sharp.
How it works:
- Start Value: 0 (no effect) to higher values (more blur)
- End Value: Intensity of the blur
- Center stays sharp, edges blur
- Makes things look like tiny models
Cool uses:
- Miniature effect: Make real scenes look like toys
- Focus attention: Force viewer to look at center
- Artistic shots: Cool screenshot effects
- Depth simulation: Fake camera depth of field
- Unique transitions: Different from normal blur
Settings to try:
Subtle depth:
Start: 0, End: 3, Speed: 1.5s
Strong miniature:
Start: 0, End: 10, Speed: 2.0s
Constant effect:
Start: 5, End: 5
The vibe: Looking at the world through a tilt-shift lens (very Instagram)
Pro tip: Works great on cityscape or landscape images!
7. RGB Split
Splits the red, green, and blue color channels apart. Digital glitch city!
How it works:
- Start Value: 0 (normal) to higher values (more split)
- End Value: How far apart to split the channels
- Creates that chromatic aberration / 3D glasses effect
Cool uses:
- Glitch effects: Digital corruption aesthetics
- Cyberpunk themes: Matrix vibes
- Error states: Visual "something's wrong"
- Psychedelic effects: Trippy color shifts
- Impact moments: Visual emphasis
- VHS degradation: Old tape player glitches
Settings to try:
Subtle glitch:
Start: 0, End: 2, Speed: 0.1s, Yoyo
Medium split:
Start: 0, End: 5, Speed: 0.5s
Wild corruption:
Start: 0, End: 15, Speed: 1.0s
Glitch pulse:
Start: 0, End: 8, Speed: 0.3s, Loop + Yoyo
The vibe: Your theme just glitched... in a COOL way
Combine with: Pixelate filter for maximum digital chaos!
Combining Filters
Here's where you become a wizard. Stack multiple filters for unique effects:
Retro Gaming Package
Pixelate (4-6) + CRT (1) + slight RGB Split (1-2)
Ultimate arcade authenticity
Old Film Horror
Grayscale (1) + Old Film (1) + slight Blur (5)
Found footage nightmare fuel
Cyberpunk Glitch
RGB Split (5-10) + Pixelate (3) + Tilt Shift (3)
Digital dystopia achieved
Dreamy Focus
Blur (10-15) + Tilt Shift (5) + Grayscale (0.5)
Artistic photography vibes
Vintage Tech
CRT (1) + Old Film (0.5) + Grayscale (0.7)
Black and white computer lab, circa 1983
Animating Filters
Fade In Effects
Start at 0, end at desired value. Great for intros.
Fade Out Effects
Start at desired value, end at 0. Perfect for exits.
Pulsing Effects
Set medium values, enable Loop + Yoyo. Creates breathing effects.
Quick Flash
Low speed (0.1-0.3s) with high end value, then Yoyo back. Great for impacts.
Static Application
Set start and end to same value. Just apply the filter permanently.
Performance Tips
Filters are more intensive than basic animations. Here's how to keep things smooth:
Light filters (fast):
- Grayscale
- Tilt Shift
Medium filters (moderate):
- Blur (at low values)
- Pixelate
Heavy filters (more intensive):
- CRT
- Old Film
- RGB Split
- Blur (at high values)
Best practices:
- Don't stack 5 filters on every layer
- Use on hero elements, not everything
- Test on lower-end devices if targeting them
- Static filters (same start/end) perform better than animating them
Filter Quick Reference
| Want This Look | Use This Filter | Value | Pair With |
|---|---|---|---|
| Retro gaming | Pixelate + CRT | 4-6, 1 | Arcade sounds |
| Film noir | Grayscale | 1 | Dramatic shadows |
| VHS tape | Old Film + RGB Split | 1, 2-3 | Scanlines |
| Dreamy | Blur + Tilt Shift | 10-15, 5 | Slow motion |
| Glitch art | RGB Split + Pixelate | 8-10, 5 | Strobe effect |
| Miniature | Tilt Shift | 5-10 | Bright colors |
| Focus pull | Blur (animated) | 0→20→0 | Camera metaphor |
When to Use Filters
Use filters for:
- Stylistic themes (retro, glitch, vintage)
- Attention direction (blur backgrounds)
- State changes (grayscale = inactive)
- Special effects (impacts, errors, transitions)
- Branding (consistent visual style)
Maybe skip filters when:
- Going for clean, modern look
- Targeting low-end hardware
- Already have tons of animations
- Text readability is critical
The Filter Mindset
Filters are like Instagram filters for your theme. They're not always necessary, but when used right, they absolutely MAKE the aesthetic. A modern theme with clean graphics? Maybe skip filters. A CRT monitor theme for old computers? Filters are essential!
Don't be afraid to go heavy on filters for specific themes. Sometimes "too much" is exactly right.
Next Steps
Want even MORE effects? Oh, we've got more:
- Advanced Effects - Shaders and wild effects
- Animation Timeline - Orchestrating everything
- Best Practices - Making it all work together
Experiment Time: Create a test layer and cycle through each filter. Crank them up to 11. Break stuff. That's how you learn what each one REALLY does! 🎨