Framer parallax effects make background and foreground layers move at different speeds as a visitor scrolls, creating depth and a sense of motion on the page. In Framer you build them with the Scroll Transforms feature: pick a layer, set its scroll speed or position offset, and Framer ties the animation directly to scroll progress, no code required.
Parallax has been a hallmark of high-end web design for over a decade, and Framer makes it one of the easiest motion techniques to ship. Because the effect is driven by native scroll events rather than heavy JavaScript libraries, a well-built Framer parallax section stays smooth on mobile and keeps your Core Web Vitals healthy.
This guide walks through every way to build parallax in Framer, the exact UI steps for each method, performance limits to respect, and the design patterns that make the effect feel intentional rather than gimmicky.
Key takeaways
- Parallax in Framer is built through Scroll Transforms, which map a layer’s position, scale, opacity, or rotation to scroll progress.
- The simplest version sets a background layer to a slower scroll speed than the content in front of it, producing classic depth.
- Framer runs parallax on the browser’s native scroll, so performance stays strong when you animate transform and opacity rather than layout properties.
- Subtle offsets of 10 to 30 percent feel premium, while large offsets read as distracting and hurt readability.
- Always test parallax on real mobile devices, since touch scrolling and reduced-motion preferences change how the effect behaves.
What parallax actually does in Framer
Parallax is a scroll-linked animation. As the visitor scrolls down, Framer measures how far a given section has progressed through the viewport and uses that value to drive a transform on one or more layers inside it. A background image might shift up by 80 pixels while the heading in front of it shifts up by 200 pixels, so the two appear to separate as if on different planes.
The important distinction is that parallax is tied to scroll position, not to time. Nothing animates on its own. The motion only happens while the visitor scrolls, and it reverses cleanly when they scroll back up. That predictability is what makes parallax feel responsive rather than like a video playing over the page.
Scroll Transforms versus Scroll Variants
Framer gives you two scroll-based tools, and choosing the right one matters. Scroll Transforms apply a continuous transform that tracks scroll progress across a range, which is what you want for parallax. Scroll Variants snap a layer between two states when it enters or leaves the viewport, which is better for one-time reveals like a fade-in. For genuine parallax, you want Scroll Transforms because the motion needs to be continuous, not a single trigger.
Building basic parallax: step by step
Here is the most common pattern, a hero section where the background image scrolls slower than the headline. Follow these steps inside the Framer editor.
- Create a section or frame and give it a fixed height, for example 100vh, so there is room for the scroll range to play out.
- Place your background image as a layer inside that frame and set it to fill the frame, slightly oversized by 10 to 20 percent so the parallax shift never reveals an empty edge.
- Select the background layer, open the right-hand properties panel, and find the Scroll section.
- Add a Scroll Transform and choose the Y position property.
- Set the start value to 0 and the end value to a small negative number such as minus 80, so the background drifts upward as the page scrolls.
- Select your headline or foreground content and either leave it static or give it a larger offset, for example minus 200, so it moves faster than the background.
- Preview the page and scroll. The background and foreground now separate, creating depth.
The ratio between the two offsets is the entire effect. A background at minus 80 and foreground at minus 200 gives a clear, premium separation. Push both numbers higher and the motion becomes aggressive. Keep them close together and the effect nearly disappears.
Layering multiple planes
Depth gets richer when you stack three or more layers, each on its own offset. A far background might move minus 40, a midground decorative shape minus 120, and the foreground text minus 220. The graduated speeds mimic how distant objects in the real world appear to move slower than nearby ones. Keep the count to three or four planes, since more than that rarely reads as additional depth and only adds weight to the page.
Parallax property options in Framer
Position is the obvious property to animate, but Framer lets you tie several transforms to scroll. The table below compares the main options and where each one fits.
| Property | What it does | Best use |
|---|---|---|
| Y position | Moves a layer up or down as you scroll | Classic vertical parallax, hero backgrounds |
| X position | Moves a layer left or right | Horizontal drift on decorative shapes |
| Scale | Grows or shrinks the layer | Slow zoom on a hero image |
| Opacity | Fades the layer in or out | Revealing or dimming background art |
| Rotation | Spins the layer by a set angle | Subtle motion on abstract graphics |
| Blur | Increases or decreases blur | Pushing a background out of focus on scroll |
Combining two properties at once, such as a slow scale together with a Y offset, produces the cinematic hero you see on premium product sites. The trick is restraint. One or two animated properties per layer keep the effect legible. Stacking five transforms on a single image usually makes the page feel busy and harder to read. If you want to go deeper on blur, opacity, and other visual treatments, the breakdown in our Framer effects and filters guide covers how each one renders and when to reach for it.
Performance and Core Web Vitals
Parallax has a reputation for being heavy, but in Framer that comes down to which properties you animate. Animating transform and opacity is cheap because the browser can offload those to the GPU. Animating layout properties such as height, width, top, or margin forces the browser to recalculate the page on every scroll frame, which causes jank.
Rules that keep parallax smooth
- Animate position and scale, which Framer renders as transforms, rather than resizing layers directly.
- Compress background images before upload. A 4000-pixel-wide hero at full quality will stutter on mid-range phones regardless of how clean the animation is.
- Limit the number of simultaneously animating layers in a single viewport to three or four.
- Test on a real phone, not just the desktop preview. Mobile scroll behavior and GPU budgets differ sharply from a laptop.
Done this way, parallax adds essentially no measurable cost to Largest Contentful Paint or Cumulative Layout Shift, because the layers animate within space that is already reserved. The most common cause of layout shift is an oversized background that has not finished loading, so set explicit dimensions and lazy-load images that sit below the fold.
Respecting reduced motion
Some visitors enable a reduced-motion preference in their operating system because heavy animation triggers discomfort or motion sickness. Framer respects this preference for many of its built-in interactions, but you should verify that your parallax section degrades gracefully. The safest approach is to keep the parallax offsets small enough that, even at full strength, the motion stays gentle. For sites with an accessibility-first audience, consider a static fallback for the hero so the core message reads instantly without any scroll-dependent movement.
Design patterns that make parallax feel intentional
Parallax works best when it reinforces hierarchy rather than decorating the page for its own sake. A few patterns consistently perform well.
The receding hero
The background image drifts up slowly while the headline drifts up faster, so the headline appears to lift off the image. This is the single most reliable parallax pattern and suits almost any landing page hero.
Floating accent shapes
Small decorative shapes, dots, or blobs given slightly different offsets create life in otherwise flat sections. Keep them low-contrast so they support the content instead of competing with it.
Sticky section with moving art
Pin a text column with a sticky position while an adjacent image column parallax-scrolls past it. This pairs beautifully with a feature walkthrough where each scroll step reveals a new visual. If you are choosing a starting point rather than building from a blank canvas, several layouts in our roundup of the best Framer templates for agencies already include polished parallax sections you can adapt.
When to use a plugin instead
Framer’s native Scroll Transforms cover the vast majority of parallax needs. For more elaborate scroll-driven sequences, such as a pinned scene where multiple elements choreograph together, a community plugin can save time. We keep a running list of the strongest options in our guide to the best Framer plugins, including several that extend scroll animation beyond the built-in feature set. As a rule, reach for a plugin only when the native tools genuinely cannot express the motion you need, since every added dependency is one more thing to maintain.
Frequently Asked Questions
Does Framer parallax slow down my website?
Not if you animate the right properties. Framer renders position, scale, and opacity changes as GPU-accelerated transforms, which add almost no cost to scroll performance. Slowdowns usually come from uncompressed background images or from animating layout properties like height and width. Compress your assets and stick to transform and opacity, and parallax stays smooth.
Can I add parallax in Framer without writing code?
Yes. Parallax is built entirely through the Scroll Transforms feature in the right-hand properties panel. You select a layer, add a Scroll Transform, choose a property such as Y position, and set start and end values. No JavaScript or custom code is required for any standard parallax effect.
How much parallax offset should I use?
For a premium, subtle feel, keep background offsets in the range of 10 to 30 percent of the section height, often around 60 to 120 pixels. Foreground layers can move faster to create separation. Large offsets above that range tend to feel distracting and can hurt readability, so start small and increase only if the depth is not visible enough.
Will parallax work on mobile devices?
Yes, Framer parallax runs on mobile, but touch scrolling behaves differently from a mouse wheel and GPU budgets are tighter on phones. Always test on a real device, keep offsets gentle, and consider a static fallback for visitors who have a reduced-motion preference enabled in their operating system.
If you want a Framer site with parallax and scroll animation built to perform, not just to impress, our team builds and ships sites exclusively in Framer. See what a project looks like on our pricing page or reach out through our contact page to talk through your build.