---
title: "LayerTransition — Framer component · Best of Framer"
description: "$5.00 · Framer component · by RAMDIN SINGH · Backgrounds. Description This CSS animation creates a layered curtain-style reveal effect using pseudo-elements (:before and:after)."
canonical: "https://framer.elliotli.dev/component/layertransition"
---

[Home](/)/[Components](/components)/[Backgrounds](/components/category/backgrounds)/LayerTransition

# LayerTransition

[View on Framer](https://framer.com/marketplace/components/layertransition/?via=elliot-li)

![LayerTransition preview image 1](https://framer.elliotli.dev/og/component/layertransition/582dceee02b5f536/1600x1200.jpg)

## Summary

Description This CSS animation creates a layered curtain-style reveal effect using pseudo-elements (:before and:after).

## Description

**Description**

This CSS animation creates a **layered curtain-style reveal effect** using pseudo-elements (:before and :after).

-   Two layers (orange and aqua) expand and slide upward from the bottom of the screen.
    
-   The clip-path: ellipse() property shapes the animation into smooth curves, giving a liquid or wave-like transition feel.
    
-   Keyframes (s0, s1, s3) sequentially move, resize, and stretch the shapes to create a dynamic reveal effect.
    
-   The background stays black, which makes the bright colors stand out vividly.
    

Perfect for **website intros, transition screens, or section reveals** in creative web projects.

## Rank history [How rankings work →](/terms#rankings)

-   All · #11056

## Details

- **Author**: RAMDIN SINGH
- **Price**: $5.00
- **Published**: 2025-10-07
- **Updated**: 2026-01-03
- **Added**: 2025-10-01
- **Categories**: Backgrounds

## More like this

-   [Pixel Flicker](/component/pixel-flicker) — Design Foundry · $10 — premium animated pixel background
-   [Fractal Glass Wave](/component/fractal-glass-wave) — Hienn Ng · $3 — Dynamic Fractal Glass Background
-   [Particle Flow Pro](/component/particle-flow-pro) — Interface Studio · $10 — Bring Your Background to Life
-   [Silk Gradient](/component/silk-gradient) — Kaisa A · Free — Silk Gradient Background