Superorganism Website in Framer

Superorganism Website in Framer

Superorganism Website in Framer

Superorganism Website in Framer

Website animation

Website animation

Website animation

Website animation

Superorganism Website in Framer

Superorganism Website in Framer

Superorganism Website in Framer

Superorganism Website in Framer

This is the Superorganism site, recreated in Framer without writing a single line of code. Feel free to remix the project and check out how it's built.

This is the Superorganism site, recreated in Framer without writing a single line of code. Feel free to remix the project and check out how it's built.

This is the Superorganism site, recreated in Framer without writing a single line of code. Feel free to remix the project and check out how it's built.

This is the Superorganism site, recreated in Framer without writing a single line of code. Feel free to remix the project and check out how it's built.

Superorganism Website in Framer
Superorganism Website in Framer
Superorganism Website in Framer
Superorganism Website in Framer

Features

The website has a lot of cool scroll animations that I built in Framer, without any coding needed.

The hero section stays fixed while other sections scroll over it, creating a nice effect.

To achieve the "section overlap" effect where the next section peeks but doesn't immediately scroll, sticky positioning with a bottom value is used.

superorganism detail 1

In the "images coming out of their frame" effect, the same image is used twice. One image is the original, unmodified version, while the other image has the subject isolated with a transparent background. By moving both images to the top using scroll transform, and cropping only the image without the isolated subject, it creates the illusion that the subject is coming out of the frame.

superorganism detail 2
Step 01 outline

Step / 01

Remix the project.

Step 2 outline

Step / 02

See how it's built.

Step 3 outline

Step / 03

Try recreating it for practice, or copy and paste it to your project.

Free Framer Course

Learn how to create stunning websites with ease by learning the fundamentals of Framer.

Free
Framer Course

Learn how to create stunning websites with ease by learning the fundamentals of Framer.

Free Framer Course

Learn how to create stunning websites with ease by learning the fundamentals of Framer.