Animation
Parallax Image Scroll Animation 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.
Created by
About the resource
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.
About the resource
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.
About the resource
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.
The sticky overlap effect.
The sticky overlap effect.
The sticky overlap effect.
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.
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.
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.
Overflowing images with parallax effect.
Overflowing images with parallax effect.
Overflowing images with parallax effect.
