Framer
Framer
  • Learn
    • Speedruns
    • Starter Kit
    • Examples
    • Tutorials
    • Sessions
  • Teams
    • Teams
    • Enterprise
  • Pricing
  • Blog
  • Updates
  • Support

Magic Motion

Animated Tabs
Card List
Card Paging
Container Transitions
Dynamic Grid
Expand on Tap
Image Gallery
Image Gallery 2
Magic Motion
Stories UI
Swipe & Expand
To-Do List
Toggle Menu

Overlays

Bottom Sheet
Draggable Sheet
Modal Box
Side Menu

Components

Input Form
Loading Indicator
Radio Button Form
Tooltip on Hover

Flows

Checkbox Form
Splash Screen
Timeout Transition

Interactions

Accordion Menu
Drop on Scroll
Nested Scroll
Star Rating
Swipe Menu
Switch Sheet
Tab Menu
Wheel Picker

Effects

Cover Flow
Cube Effect
Flip Effect
Parallax Scroll
Perspective Tilt
Pile Effect
Shuffle
SVG Animation

Integrations

Google Sheets
Map
Signature Pad
Sound Effects

Code

Card Swipe
Carousel
Custom Effect
Drag Handle
Dynamic Header
Image Panning
Input Data
Input Validation
Like Animation
Like Counter
Lock Screen
Long Press Menu
Perspective 3D
Progress Bar
Scroll Progress
Show Password
Slider
Stories: Drag
Stories: Tap
Toast Prompt

Parallax Scroll

Open in Framer to interactPreview this example

Create a parallax scrolling effect.

Open in FramerPreview Example

What is a parallax effect?

Parallax scrolling effects are a popular way to add depth to flat designs. The effect relies on movement: when a camera moves within a three-dimensional scene, objects in the viewfinder will appear to move in the opposite direction. We call the rate of this movement the object’s parallax.

And the closer an object is to the camera, the more parallax it will have as the camera moves horizontally.

You don’t need a camera or software to see the parallax effect at work in real life though. Next time you are a passenger in a car or on public transport, notice that the apparent speed at which the scenery outside the window passes by depends upon its distance from you. Objects that are further away(mountains, or a city skyline, as just a couple of examples) will appear to move more slowly than ones that are closer to you(e.g. neighborhood homes).

Meanwhile, objects that are situated just a short distance from you(cyclists, parked cars, plants and trees on the verge) may flash by so quickly that you barely have time to take them in.


Harnessing the parallax effect

We humans have learned to read the distance of objects partially from the speed at which they appear to move past us. In practice this means that we will understand the depth of an image from the relative speed of movement of any objects contained within it.

As designers, we can take advantage of this fact to create interactive websites that appear to have real depth. When designing a website, you can achieve a parallaxing scroll effect by moving the design’s“background” elements at a slower rate than the“foreground.” As the user scrolls, background objects will seem to have a smaller parallax, creating a convincing illusion of depth.

What are the advantages of parallax scrolling?

Parallax scrolling is a more dynamic and exciting way to present information, products, or services than a simple static page or regular scrolling action.

For users, parallax scrolling can be a highly satisfying form of navigation, as it will react immediately and tangibly to their input; scroll, and something happens; scroll faster and the effect will be more noticeable. The result is that parallax scrolling makes visitors feel in charge of the navigation experience. It’s also a lot of fun. And clearly anything interactive of this kind can only to lead to greater engagement.

How to create parallax scrolling in Framer

The easiest way to achieve a parallax scroll effect in Framer is to use custom components. You can search in the Insert Menu for the Parallax: Scroll Effects package from Linton Ye. This Community package does a lot of the heavy-lifting for you, so you can create advanced scroll interactions in minutes. You will still need to make some decisions about how and when an item should respond to a scroll, but you’ll get the result without needing to code anything yourself.

With the Parallax: Scroll Effects package, you can use the Parallax Layer’s component to drive changes to several properties, such as its speed, scale, rotation, or opacity. The property will move between its Min to its Max, starting when the scroll’s position matches the provided Scroll Min value and ending when it matches the Scroll Max. You can learn more about a layer’s position by holding the Option key while hovering over the layer.

Once the components are set up on your canvas, with the properties set, you can preview your design to check that the parallax scrolling effect is exactly how you want it.

Resources
  • Talk about this on Discord

Framer

  • Updates
  • Pricing
  • Tutorials
  • Teams
  • Enterprise
  • Blog
  • Motion

Platforms

  • Web
  • macOS
  • iOS
  • Android
  • Figma Importing
  • Sketch Importing
  • User Testing
  • Desktop PrototypingNew

Resources

  • Examples
  • Sessions
  • SpeedrunsNew
  • Packages
  • Volt
  • API
  • State of Prototyping
  • Wireframing Tool
  • Mockup Tool
  • Dictionary

About

  • Loupe
  • Community
  • Company
  • Careers
  • Security

Support

  • Using Framer
  • Accounts
  • Contact

  • Twitter
  • Discord
  • Dribbble

Copyright © 2021 Framer B.V.

  • Security
  • Terms of Service
  • Privacy Statement