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

Design by https://mubien.com/

This cloneable is for learning purposes only. I do not own the rights to this design and content.

CMS Portfolio Scroll

T.RICKS Locomotive Smooth Scroll in Webflow including position fixed, sticky, and CSS interactions. Watch the full tutorial at https://www.youtube.com/watch?v=D-vYtfcz0NI

T.RICKS Locomotive Smooth Scroll JS

T.RICKS Locomotive Smooth Scroll

Rebuild of the https://k72.ca/en nav menu

This cloneable is for learning purposes only. I do not own the rights to this design and content.

K72 Menu

In honor of reaching 10k YouTube subscribers, I want to celebrate by releasing this cloneable.

T.RICKS 2020 Portfolio

Sticker interaction I coded for a recent tutorial on my Webflow YouTube channel at https://www.youtube.com/c/timothy-ricks

T.RICKS Stickers

Made this with the help of Tim Ricks! https://www.youtube.com/watch?v=2rBZmBY0BO8

Great build to get started with Wizardry techniques, GSAP animations, and a bit of custom code. I opted for JS over jQuery in my code.

Mubasic Clone

Mubasic Hero Clone

When working with other developers and designers on Webflow, I found many people make mistakes that can have a big impact on their design, UX or on-site SEO, but that are really easy to fix. Therefore, I decided to create a small one-pager website with some of those tips, tricks and good practices that can help when building a website with Webflow.

Of course, this is a work in progress - there are way more than 3-4 things I have to share and teach: I just haven't had the time to write the text and take the example images for those things yet. 

If you have some feedback about the website, a message for me or an idea of a tip/trick/good practice to add to the site, you can use the form at the bottom of the page to contact me!

I hope you enjoy the site and can learn a thing or two!

Webflow tips, tricks and good practices

Watch the build tutorial at https://www.youtube.com/watch?v=mIRR7Qetoi4

Watch the design tutorial at https://www.youtube.com/watch?v=fsPuLR36wOU

MailChimp Tutorial

Mailchimp Hero - Tutorial Completed

An editable thick underline for your Headlines

Thick Underline

Editable Thick Underline

My first cloneable!

I rebuild Buffer's homepage in Webflow. I made it mainly for fun and also to give something to the community, so I made it a cloneable.

Some custom css and jQuery were used for some animations.

Not perfect but enjoy and let me know what you think!

Please Note: NOT RESPONSIVE

Enjoy. 😄

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

👨‍💻 Available for work, DM me.

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

💌 Follow me on social media

https://twitter.com/lehardjo

Buffer Rebuild

Buffer Webflow Rebuild

There are many ways to create highlights and underlines in text. Here are a couple examples that are based on playing with the background color.

Sign up if you want the lesson: https://www.webflowtips.com/b/how-to-create-custom-highlight-and-underline-text

P.S 🙂  🙌  - Like or follow if this was useful for you.

4 of 50

How to create custom highlight and underline text?

Designs from:
https://www.luminous.co.kr/
https://www.antic.xyz/
https://virtual-gallery.okeystudio.com/

View Resource:
https://www.timothyricks.com/resources/scroll-flip

Scroll Flip

Ajax Modal

With just a couple steps clip an image to any text. 

Sign up if you want the lesson https://www.webflowtips.com/b/how-to-clip-image-to-text

P.S 🙂  🙌  - Like or follow if this was useful for you. 

3 of 50

Webflowtips - Text Clipping

How to clip image to text?

The CSS-Tricks solution for a 100vh element that doesn't overflow the screen when browsing through mobile.

Solution by Louis Hoebregts from https://mamboleoo.be/ as presented here:
https://css-tricks.com/the-trick-to-viewport-units-on-mobile/

100vh

100vh-trick

This is the first project. I wanted to start super simple creating a line.

P.S 🙂  🙌  - Like or follow if this was useful for you. 

1 of 50

Webflowtips - Line

How to create a line?

A Before / After effect for photos, without any code. Only Webflow's interaction.

An explainer can be found in the Tiny-Resources website:

https://tiny-resources.com/elements/before-after-effect

Discover tricks websites built by the Webflow community

Discover tricks websites built by the Webflow community