RMv0YJlLOBe7cY7HgZ3Jox34R0Wrk7jLv3DZyBETA7I=

ZC8pa382rux3/Ya5JYmbaiFDJJqVQfa/ZkKRoDwNIOg=

zRYikcIlbF3Un7C26+4VGO/t8jKwNjjuAdQWLlZECTQ=

/zPeDB00QSmJg02UNPvvY6N+w7bL9XbOTmOZn0UHdA0=

9DmxyyZ8FEsc5DSKm/8DpcDu2e/GCLlCF0UJQCEBuSw=

JjJ1QQExEPT0oEkDXkJv3GS+SSK/inDh+qJb5poF7uc=

OU0WGPE+vsPHE35uwfF+0Jq1FmmrC0EZ1j07htBnxEM=

Pesmw2FSIduSR93sJEVAEAHyJZ4MQP9Pbn1gPgXxcXw=

l+2HpTI8qsEqSoxz6Y8y+po4C4+PakSbBdZ2Wp0L/Zk=

p8RKstqTUsFv0yM8P1EiWUksDkzfBxAw5OAvX/lo29w=

xdTyVT3ZuBSNWCl2NPxJ8eZ0ifhUzatwezSwUElWFy0=

Learn how to create an "ultra gradient" in Webflow. This cloneable is based on Fons Mans' Twitter thread (https://twitter.com/fonsmans/status/1569708218351247366). He wrote a tutorial for Figma and I tried to create it in Webflow without any imported shapes or images.

YouTube Tutorial: https://youtu.be/8ZHsLochLFA

Ultra Gradients in Webflow (Cloneable)

I found the effect on the iPhone 14 Pro (2022) site (the site is deleted by Apple every year if a new iPhone comes out.). 

Watch the Tutorial to see how I build the effect: https://youtu.be/w0tJnjrRTlg

Apple like Text Gradient Scroll Effect (iPhone 14 Pro Page)

My YouTube Webflow community asked for a nice grid design as a tutorial, so I recreated Vitaa Architects' Journal section as an example: have a look at the original website here: vitaarchitecture.com/journal

They didn't use css grid for their layout but I found it is a perfect use case for it. 
The grid contains several collection lists which are always limited to one item. This allowed me to create a more varied grid design.  

I also use a fluid design system. It scales down the grid on the desktop breakpoint from 1600px downwards. The custom CSS for this is written in the global-css embed.

Watch the tutorial here: https://youtu.be/9plbrIo4lfM

🖤

Free Grid Design Template (CMS ready)

In this cloneable, Lukas shows us how he shrinks a navigation in Webflow once it reaches a certain point while scrolling. In this case as soon as the next section arrives at the navigation. In addition, the design of the navigation changes from dark to light and the next section over scrolls the first. 
No custom code is needed for this. It is all solved directly with the Webflow interactions.

Tutorial: https://youtu.be/0ZkoNovZlFY

Shrink Nav on scroll + overscroll Section Effect

Shrinking Nav on scroll + overscroll section effect