Discover the best tab-scroll websites created by professional designers. Get inspired and start planning your perfect tab-scroll web design today!

Example of using the 'tab change' interaction trigger to animate elements within both the Tab Link and Tab Pane when a tab is selected!

NOTE! Any interactions happening within the Tab Pane must start after any interactions within the Tab Link are finished, otherwise the tab component will cut off the animation resulting in nothing happening in the Tab Pane. 👍

Tab Change Interaction

Recreation of: https://webflow.com/website/Open-Studio

1. To change the background-image go into the embed-code (inside the designer) and search and change the URL of the following:

bg = loadImage("https://i.postimg.cc/DwTMdBjn/Download.png")

2. To change the text that is being displayed go into the embed code (inside the designer) and search and change the following string saying "Get in touch" to whatever you wish.

  points = font.textToPoints('Get in touch', .....
}

Font-Distortion Effect on Hover

Font-Distortion

Can a complex game menu such as Battlefield 4's one be built in Webflow?
Yes!

Almost no code was used, I used just a little for insignificant stuff such as linking links to tabs or creating custom scroll bars.

Clone it and have a look through it.

Tutorials incoming on my YouTube channel, subscribe 👉 youtube.com/channel/UCgwvah4M6Anta4_5ACFiuRQ

__

• Do you need web design & development? Get in touch 👉 bjorn-encutescu.webflow.io/

• Follow my daily tips on Instagram 👉instagram.com/bjorn_encutescu/

Battlefield 4 Webflow Rebuild

A Webflow Tabs widget with some edits and custom code to make the menu scrollable on desktop & mobile

Scrollable Tabs Menu

Scrollable tabs menu

This is a simple newsletter input, which will pop up a data privacy notice if the input is active. Link it to your Mailchimp or whatever and have fun with it.

Sign Up Form // GDPR-Checkbox on active Input

******PUBLISH THE SITE FOR IT TO WORK*******

Playing around with scrollify and using it to change "Tabs" on scroll and/or click. You can also use the arrow to switch between the tabs. There is also an Animation for the active tab. 

Let us know if you want a version with more tabs or other functionalities :)

PLAYGROUND: Srollify - Change Tabs on Scroll and/or Click

change-tabs-on-scroll-and-or-click

The JUNGE KUNST FESTIVAL of the 48 Stunden Neukölln, took place this year for the eighth time from June 18 to June 26. Every year it attempts to show a whole range of creative and artistic work by children, young people and young artists*, which particularly reflect the diverse and international Neukölln.

Discover tab scroll websites built by the Webflow community

Discover tab scroll websites built by the Webflow community