🥳 Enjoy 3 months of Framer for free!
What are we building
#1 - What if your content is larger then the container?
Working with horizontal scrolls can be a great way to show a ton of information. It also helps quite a lot when showing information on smaller screens. Unfortunately a lot of people seem to be struggling with getting it just right. Let's dive in!
#2 - Set overflow to: scroll isn't always the solution
It's very easy to enable scroll in Framer. All you need to do is set the overflow property to Scroll and make sure the children of the parent container are larger in width/height.
Although as you can see. It can end up looking weird because not everything should scroll.
#3 - Remember this logic
How to keep the topbar fixed? Easy, just follow the same logic. The container that should scroll should have children that are larger then the container and applied with Scroll overflow. All of the rest should just follow the container sizing.
#4 - Finishing the interactions
Now you can easily connect your variants to achieve all of the effects.
#5 - Making it work on the canvas
Furthermore you can now style the component as you'd like on your page. I just wrapped this component inside a frame and added some styling. Making it even smaller now just creates more scroll room instead of problems. Isn't that great?
👋 I hope you've enjoyed today's drop.