Bring the iconic, cinematic "Apple product page" experience to your Framer projects in seconds with the Chronos Scroll Stack.
Chronos is a highly performant, scroll-driven sticky gallery. As your users scroll down the page, the current image seamlessly scales down, dims into the background (creating a 3D depth effect), and allows the next image to beautifully slide up and overlap it.
Building this effect manually in Framer can take hours and often results in scrolling lag. Chronos solves this by utilizing pure React and Framer Motion's advanced useScroll hooks, tied directly to GPU-accelerated properties for a buttery-smooth 60fps scrubbing experience.
Premium Features:
Cinematic Depth Stacking: Automatic scale-down and dim-opacity effects as images get pushed back.
1:1 Scroll Scrubbing: The animation follows the user's scroll wheel perfectly. Includes a "Smooth Scrub" option to add a subtle spring physics delay.
Ultra-High Performance: Engineered with Framer's strict marketplace standards. Uses useIsStaticRenderer and hardware acceleration (transform/scale) to ensure zero lag in the editor and on the live site.
Zero Dependencies: Pure Framer Motion magic. No heavy external libraries.
Fully Customizable: Adjust the scroll distance, scale ratio, dim opacity, and corner radius directly from the Framer properties panel.
CMS Ready: Effortlessly connect your Framer CMS collection to generate unlimited stacked layers.
Perfect for: SaaS feature showcases, premium product landing pages (like hardware or physical goods), and high-end creative portfolios.
Bring the iconic, cinematic "Apple product page" experience to your Framer projects in seconds with the Chronos Scroll Stack.
Chronos is a highly performant, scroll-driven sticky gallery. As your users scroll down the page, the current image seamlessly scales down, dims into the background (creating a 3D depth effect), and allows the next image to beautifully slide up and overlap it.
Building this effect manually in Framer can take hours and often results in scrolling lag. Chronos solves this by utilizing pure React and Framer Motion's advanced useScroll hooks, tied directly to GPU-accelerated properties for a buttery-smooth 60fps scrubbing experience.
Premium Features:
Cinematic Depth Stacking: Automatic scale-down and dim-opacity effects as images get pushed back.
1:1 Scroll Scrubbing: The animation follows the user's scroll wheel perfectly. Includes a "Smooth Scrub" option to add a subtle spring physics delay.
Ultra-High Performance: Engineered with Framer's strict marketplace standards. Uses useIsStaticRenderer and hardware acceleration (transform/scale) to ensure zero lag in the editor and on the live site.
Zero Dependencies: Pure Framer Motion magic. No heavy external libraries.
Fully Customizable: Adjust the scroll distance, scale ratio, dim opacity, and corner radius directly from the Framer properties panel.
CMS Ready: Effortlessly connect your Framer CMS collection to generate unlimited stacked layers.
Perfect for: SaaS feature showcases, premium product landing pages (like hardware or physical goods), and high-end creative portfolios.
Agie Faishal
