The finweet's client-first style system 💪 was used to rebuild the Lattice's new revamped site 🤌.

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

Disclaimer: This project was made for educational purposes and is not affiliated with Lattive in any way. All rights of the images, logos, and texts belong to Lattice.

------------------------------------------------
Have a new project in mind? Let's chat -
🟢 https://cal.com/chintan/30min

Contact:
📭 hello@chintan.design
🌎 https://chintan.design
🐥 https://twitter.com/heyychintan
------------------------------------------------

Lattice: Client-first Implementation

An apple style feature grid that you can clone and customise how you like!

Here's my Webflow tutorial on how this was done: https://www.youtube.com/watch?v=fAkGkF-w1gI

Apple Style Grid

Normally, Webflow's native slider stops autoplaying as soon as you interact with it (which is usually what you want) but here's a version that continues to play even after interacting with it.

This way, we can continue to track progress nicely with a little Lottie animation on the next button.

✅ Native Interactions
✅ Custom Code (CSS-only)

--

Follow along for more!

Follow me on Twitter: https://twitter.com/kevinhaag
Subscribe on Youtube: https://youtube.com/kevinhaagsucks

MM—006: Timed Automatic Slider

This is the official project starter cloneable for Client-First.

It contains a style guide page with all the utility classes that come with the Client-First style system.

What is Client-First? https://www.finsweet.com/client-first

Full docs: https://www.finsweet.com/client-first/docs

Made with 💪 by Finsweet

Client-First Cloneable

This is a complete kit for custom sliders in Webflow. Watch the tutorial at https://www.youtube.com/watch?v=1QY8Kab4SNs

This is built using Splide slider. https://splidejs.com/

Carousel Slider Collection

Version no code del mega menu de Asana.

Es una versión que tiene las animaciones simplificadas para poder usar las interacciones nativas de Webflow.

Los iconos se definen en los embeds "SVG Defs" y se aplican con la etiqueta <use>

Hay un poquito de custom code con comentarios en cada una de las instrucciones CSS.

Cualquier duda en los comentarios o en la comunidad Somos Webflowers.

https://comunidad.somoswebflowers.com

Asana Mega Menu

Copy-paste cloneable components for GDPR compliant Finsweet Cookie Consent.

Full docs: https://cookie-consent.finsweet.com/

✅ Cookie consent compliant
✅ Stop scripts from loading with no-code
✅ No javascript editing. 100% attribute based
✅ 100% Webflow designer friendly. Zero design limitations
✅ Webflow Interactions integrated. Go wild
✅ Multiple options for level of cookie consent
✅ Zero cost out of the goodness of our F’in sweet hearts

Made with 💪 by Finsweet

Finsweet Cookie Consent - Components Cloneable

Landing Page design for Desktop Vision 
It is designed to be simplest and easiest remote desktop software to use. It also supports WebXR which allows you to project your desktop into augmented or virtual reality.

Full website: desktop.vision

Desktop.vision

A simple background with dashed lines similar to Stripe's website.

By using grid display and configuring the z-index, this can be used for every sections.

Have fun cloning. 😄

====================

💖☕ Support us by buying us a coffee.

If you enjoy our content, please consider supporting us. Your support will help us grow bigger and provide the community with better content.

https://www.buymeacoffee.com/sketchzlab

===================

💌 Follow us on social media.

Facebook @ www.facebook.com/sketchzlab
Instagram @ www.instagram.com/sketchzlab/
Twitter @ www.twitter.com/SketchzLab
Webflow @ www.webflow.com/SketchzLab
LinkedIn @ www.linkedin.com/company/sketchzlab/
YouTube @ www.youtube.com/channel/UCAEXTAQ7IAG71rsJ1ehBnzQ

Background with dashed lines

I'm excited to share this Stripe's Mega Menu rebuild in Webflow. I tried to make it many times but wasn't able to successfully achieve that in Webflow. But Alhamdulillah after 3-4 tries I was able to make It.

I tried to make it as structured as possible but if you have any questions about it do let me know in the comments or email me.

Note: 
- All the assets used in this project are property of Stripe and they have complete right over their use. I'm using it just for educational purposes.


Clone the Mega-menu to get started! 🚀
I encourage you to make it even better with your knowledge and expertise.

(Not responsive yet)

stripe-mega-menu-rebuild

A simple partial clone of Apple App store webpage with a scrolling content within a iPhone frame.

Phone with scrolling content

Hello Webflowers,

We always want to get inspired and experiment all the things that are possible to be done in Webflow, So, we have created a simple scroll interaction. Enjoy!

Jammy-ya Scroll Interaction

I created a YouTube tutorial here (german): 
https://youtu.be/C1k6bm8ybBY

Navigation Mega Dropdown (+ custom animation)

Source:
https://github.com/codrops/ShapeMorphIdeas/

Anime.js Svg Morph

Thanks to Ezra Siton who in the forums gave the idea to use this script.

js-ripple-effect

The project was made to help a forum question > https://forum.webflow.com/t/rotating-text-in-a-sentence/76920

Changing words in a sentence

Features:
- Overrides browsers default [ugly] validation bubbles 
- Custom hint text to guide users when errors are present
- Custom form success animation

To Do's:
1) Cross-browser testing
2) Add / verify support across all input types (dropdown, checkbox, etc.)
3) Add / verify support of numeric validation logic (dates, numbers)

Lib Dependency: https://jqueryvalidation.org/

Custom Form Styling

Here is a simple scroll animation; the purpose is to indicate to the user the page is scrollable. This may seem like second nature to scroll web pages but surprisingly not always.

Sonja Snoeyink