This Framer component features three independently animated image layers that move at different speeds as visitors scroll through your page, creating a beautiful sense of depth and perspective.

Add any Framer component to the central slot — from headings and descriptions to buttons, forms, or complete content blocks. Control its position within the layers to create unique visual compositions, including foreground elements that naturally overlap your content.

With smooth animations, responsive behavior, and extensive customization options, Layered Parallax CTA makes it easy to build memorable website sections without writing any code.

Three independent image layers: Back, Middle, and Front.

Custom images for each layer.

Independent parallax speed and zoom controls.

Image fitting: Cover, Contain, or Fill.

Vertical image alignment: Top, Center, or Bottom.

Insert any Framer component into the center.

Choose its depth: Above Back, Above Middle, or Above Front.

Adjust horizontal and vertical positioning.

Customize slot alignment and padding.

Choose between automatic width and full-width layout.

Set independent parallax movement for the content.

Smooth spring-based animations.

Adjustable stiffness and damping.

Customizable neutral scroll position.

Independent animation intensity for mobile devices.

Respect Reduced Motion accessibility preferences.

Customizable background color.

Adjustable corner radius.

Optional bottom gradient fade.

Custom fade color and height.

SaaS landing pages.

Product showcases.

Creative agency websites.

Portfolio websites.

Startup landing pages.

Hero sections and call-to-action blocks.

Modern editorial and storytelling websites.

Due to the digital nature of this product, all sales are final and refunds will not be issued.

Have questions or need assistance with the component?

Feel free to reach out: