Creating Unique Scrolling Interactions
Learn how to unlock new and exciting interactions by leveraging the latest properties of the Scroll tool.
In any modern interface, scrolling is essential. Enabling scrollable content in Framer is as easy as drawing out the scrollable area and connecting it to some content.
By leveraging different properties that the Scroll tool now offers, you’re able to unlock a whole host of interactions that’ll take your prototyping game to the next level. Let’s dig into these four examples.
A common interaction is a scrollable prototype where some elements should stick to a certain position when we scroll past this element.
When your sticky element is contained within a Stack, you will notice that a section for the Sticky property appeared at the top of the right-hand properties panel.
Upon enabling the Sticky property, our element will now be sticky when we scroll past.
Tip: Use the additional offset properties that appear to control the offset of your element to the top, right, bottom, and left sides of its parent.
Pushing previous sticky elements out of the way
By default, multiple sticky elements will overlap when they encounter each other.
To achieve an effect where the incoming sticky element pushes the previous one out of the way, we need to nest each section with each Sticky element into another Stack.
The below video also illustrates how to achieve both regular overlapping sticky elements and how to push the previous element out of the way.
Flipping the direction of content
While many applications require you to start scrolling at the top of a certain view of content, some applications actually start at the bottom. A good example is a chat app, where the most recent messages are displayed at the bottom.
To load your scroll content from the bottom up, we can leverage the
Offset Y property to push (or offset) the content on the Y-axis.
If you want your content to be able to be scrollable all the way down to the bottom, just take the
height property of the content connected to the scroll, and plug this into the value for the
Offset Y property of the scroll component.
Tip: This also works for horizontal and bidirectional scrolling, which when enabled will give you
Offset X or both
Offset Y and
Offset X properties, respectively.
Animating to a scrolled position
Offset property also unlocks the ability to animate to a specific position from screen to screen.
We can achieve this by setting up Screen A which uses the Scroll tool to create a scrollable area with any set
Offset. If we duplicate this screen and change the
Offset to any new value of this screen B, we can transition from screen to screen and the position of the Scroll content will change.
Finally, if you now add in a Magic Motion transition, which animates properties from screen to screen, you’re effectively animating from the
Offset in screen A to the
Offset in screen B.
In this example, you can now tap the status bar to animate back to the top by simply setting the second screen where the Scroll is set to
Offset Y: 0.
Resetting your scroll position after navigating away
Depending on your prototype, you may want to have your scroll position be remembered when you progress through your prototype and return to the same screen later.
Other times, after navigating away from halfway through your scroll content you may want to return to a reset view where you’re back at the very top (or whatever the starting position is) of your screen.
False, you can now control whether or not the Scroll should be reset back to its initial value or not.
In the example, the user can hit the + button to create a task. After finishing, they can now return to the top of the scroll position where a new task could be displayed.
Continued synced scrolling
In some situations, you may want to prototype an interaction where you can scroll some content and navigate to another screen that also contains scrollable content.
Take a photos app where you can scroll to a certain year. Here you can tap the year and it will lead you to a level deeper where you are on a new screen with a scrollable list of more images.
Offset property, you can now navigate to this new screen with a scrollable list of content and ensure you remain positioned at a specific point within your scroll content that you transitioned away from to add a sense of synchronization to your prototype.
Explore it yourself
More freedom with Framer’s interactive tools allows for more and more unique, advanced interactions. Dust off an old prototype where some of these may work or discover your own use-cases.
Don’t forget to share your work with us and many others in the #showcase channel in our Discord community.