How is the Webflow homepage twitter sections created?

Design help General
1

Just wondered how they made it so you can drag and move the twitter reviews used on the webflow homepage. This also works on mobiles and lets you swipe.

@brando

Here is my public share link: LINK
(how to access public share link)

2

It has to do with overflow scroll

http://vincent.polenordstudio.fr/snap/y4vex.jpg

In webflow it’s here

http://vincent.polenordstudio.fr/snap/wv0ot.jpg

and it’s a flex element so the list of item easily goes out of the boundaries of the element.

3

hmmm, tried to recreate this but the scroll overflow only allows for up and down.

4

Hi @johndvv

Thanks for making this post! Can you post a read-only link of the site you tried this on? :slight_smile:

​Thanks in advance, and I’m standing by for your reply!

5

It’s more how they did it for the webflow site as it states it’s built in webflow but not sure how they have made the scroll overflow work on the X axis

6

Hey @johndvv

If the section has a width wider than the total view width the scroll effect will work horizontally.

464×834 37.3 KB

1679×832 365 KB

Hope this helps :slight_smile:

1 Like
7

That works but I can’t get rid of the scroll bar? Is it automatic

8

Here is the Read-Only link for the above site.

To get rid of the scroll bar you will have to add in some custom CSS.

Something like this

9

Just looking at the site link you sent and you have no scroll bar but no sign of any code to do this? Is the code in the backend of the site?

10

Hey! I built this without any custom code actually. Let me briefly walk you through it.

The parent container has 100% width and a set height (which is important) as well as overflow set to hidden and relative positioning.

Next, I set the child element (that contains content that is too wide for the viewport) to be 25px taller than it’s parent (which remember, is overflow hidden) as well as overflow scroll, and position absolute, and bottom -25px.

What this does is hide any scrollbar on any device because it is hidden away in the 25px that was cut off, while still allowing you to scroll side to side on devices with trackpads etc.

Does that make sense?

3 Likes
11

Sneaky! I like it :slight_smile:

1 Like
12

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.