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

The ubiquitous cursor you have possibly seen somewhere, created completely in Webflow.

The full description is here
https://forum.webflow.com/t/drams-guide-to-custom-cursors-in-webflow

Dram's Cursors

Dram's Custom Cursor

Bookmark

Inspired by Sania Saleh for Strategyzer
Rooftop's closest free alternative typeface: Arimo by Steve Matteson 

------------------------------------------------------------- 

Work at a design firm looking for a Webflow dev team for your next brand project? Let’s chat

🔷 https://calendly.com/bookmark-wf/webflow-chat

 -------------------------------------------------------------

#1 Column/Row Size Change on Mouse Movemenet

001 - 100 Days of Webflow Interactions

Hey Webflowers!

In today's cloneable I show you how you can adapt your website to the color appearance of the native device OS settings. If the settings are on light mode, the website will appear in default white as designed in Webflow, and if dark mode is triggered, the site will turn black. ⚡️

✅ 100% CSS 
✅  Custom Code
🆓 Cloneable

To see this effect in action just change your OS color appearance.

Feel free to clone this and use it for your next project! ✨
Follow me for more Webflow freebies in the future 💙

Native Light/Dark Mode

Native Light/Dark Mode Appearance

1. Create a SECTION called foreground, change display to FLEX, center align it, and set its position to ABSOLUTE with a height of 100VH. Give it a COVER → FIXED background. Upload a blurred version of your photo.

2. Drop a DIV called MASK into the SECTION and customize it however you like. Set its position to ABSOLUTE with a Z INDEX of 1. For the zoom effect, simply add a CLICK interaction on the MASK.

3. Drop another DIV within MASK called PHOTO, set its width 100VW and height 100VH. Change its position to ABSOLUTE, give it a COVER → FIXED background, and upload the original image.

4. Add a PAGE TRIGGER interaction, select MOUSE MOVE IN VIEWPORT, and create an animation. Add MOVE interactions in the MOUSE X and Y panels.

MASK - Set X’s position to -50VW at 0% and 50VW at 100%. Set Y’s position to -50VH at 0% and 50VH at 100%.

PHOTO - Set X’s position to 50VW at 0% and -50VW at 100%. Set Y’s position to 50VH at 0% and -50VH at 100%.

That's all folks :)

Photo Masking

Component → Native Photomasking

This is a CMS based horizontal scroll animation, built only with Webflow native interactions and without any custom code. 

The main idea is to use a second collection list to make the length of the "scroll-trigger" wrapper always proportional to the width of the "horizontal-strip" (which is based on the first collection list).

That way there is nothing to adjust or change in the designer when the number of collection items changes, and the animation will always keeps a consistent speed and smooth feeling.

For more details, please check out the instructions here :

Video Instructions : 
https://youtu.be/I9hR52PGE0g

Written Instructions :
https://www.pierredemontalte.com/cloneables/cms-horizontal-scroll


Hope this helps you get started faster !

Native CMS Horizontal Scroll

Before Webflow, we had to manually create these animations. Now, you can just select an easing animation option. Isn't that crazy?

Bouncing Switches

Element → Bouncing Switches

This form is run using usebasin.com as the processor. It includes the native Webflow success and error messages, waiting text and redirects.

See more on Webflow forum here - https://forum.webflow.com/t/form-submissions-to-third-party-service-with-native-interactions/63401/27

3rd Party Form with Native Interactions

DEMO - Third Party Form with Native Features

Hi Guys, My name is Ashley and i'm please to introduce Native Rewards - A Melbourne Blockchain software company creating a cashless point of sale system with a redefined universal rewards based platform for both businesses and consumers.

Welcome to our first launch :)

Discover native websites built by the Webflow community

Discover native websites built by the Webflow community