Add a gallery with a parallax effect in Framer

Good day!

I understood the task: to create a photo gallery in Framer with smooth parallax (without micro stutters) + lightbox on click (overlay/button/ESC), correctly on mobile, with lazy loading, without CLS/layout shift.

I have done scroll-driven animations in Framer, so I immediately set quality criteria to ensure the result is predictable: test on mobile/desktop, weight limit for images, control CLS/LCP, and lightbox behavior without conflict with scrolling.

How I will implement it (briefly):
parallax only through transform (GPU) + useScroll/useTransform → images with fixed aspect ratio + lazy → lightbox as a separate component with scroll-lock (without "breaking" the page on iOS).

… Definition of Done (acceptance):
• parallax without top/position, only transform
• lightbox: overlay/ESC/button, scroll-lock without jumping, mobile okay
• images: optimization + lazy + without CLS (fixed ratio) + short video/screens of the test

2 offers:
A) "MVP" (gallery+parallax+basic lightbox, 2–3 breakpoints): 2–3 days / 4,000–7,000 UAH
B) "Production" (everything above + prev/next or swipe, extended performance pass, iOS/Android test): 4–6 days / 9,000–16,000 UAH

Questions (3): how many photos and is "load more" needed? grid — masonry or grid? do prev/next and swipe need to be in the lightbox?

Show original

Translate

Ready to implement a photo gallery with a parallax effect that works smoothly and stably on both desktop and mobile devices, without lags, micro-freezes, and layout shifts.

What will be implemented:
Smooth parallax effect optimized for fast scrolling
Correct operation during intensive scrolling
Lazy loading and image optimization for quick loading
Full adaptation to different screen sizes
Absence of CLS (layout shift)
Popup / Lightbox
… opening on click
smooth animation for appearance and closure
closure by clicking outside the image, button, and ESC key
correct operation on mobile without conflicts with page scrolling
Clean, scalable structure in Framer
Animations without overloading the render
Optimized logic for stable FPS
Neat organization of components for further support and expansion
After clarifying the details (number of images, reference examples, expected parallax behavior), I will be able to quickly provide exact deadlines and costs.

Show original

Translate