Story: Advanced Webflow
I found Webflow in the summer of 2019. Webflow was new experience to develop a website. I want to build a website by Webflow more, but it totally depends on the client, Webflow or WordPress.
In April 2020, I have to update the client’s landing page to the standard website. Therefore, I organized the previous blog, for beginner and for advanced.
This is for advanced, but it doesn’t mean difficult. These functions are benefits to use Webflow. So, why not use them. If you can integrate design and these functions, a website will be attractive for your target audience.
In April 11th, 2020, Local people reached me out through Google search. I asked him how did you find me. He was looking for a web designer who can use Webflow. The client who knows Webflow has relatively high expectations. As a designer, we have to always beyond a client’s expectation.
The turn of the videos shows priorities roughly. You don’t have to install all of them. Please find the best way.
Navigation Menu
©Webflow
Navbar(navigation bar) and hero section are the start to develop a website. Do I need to use Nav panel? It has some settings already. Therefore, I was wondering to use it. I will figure out which is more efficient.
Design Pilot: One Menu Focused Hover Effect in Webflow
Webflow: Show & Hide Navbar on Scroll
Webflow: Building a mega menu in Webflow
pixelgeek: Building a mega menu Jan 2019 ver. / Grid
pixelgeek: Building a mega menu Sep 2018 ver.(animation reference) / Flex box
*Menu setting example
Body
Section(Manual Menu)
– Div Block(Nav Container/Position: Relative)
– – Div Block(Nav Link Wrapper for background color/Position: Relative/Z-index: 1)
– – – Text Link(Position: Relative/Z-index: 1)
– – – Text Link(Position: Relative/Z-index: 1)
– – – Text Link(Position: Relative/Z-index: 1)
– – – Div Block(Slide Menu/Position: Absolute/Target: Div Block)
*Hover effect starts at 55:17.(Text color/Drop down)
Full Screen Menu
©WebDev For You
I saw a full-screen menu at the design/marketing agency website. It looks great and still attractive function, but this is not a universal I think. It may be simply not fit standard business functionally. Please discuss with the client and think about a target audience. As designer, we should always user-focused at the client’s work.
Webflow: Creating full screen menus
Custom Mouse Cursor
©WebDev For You
I was wondering how to implement this. Find it.
DesignCourse: Creating Custom Cursors – CSS Only, and JavaScript!
AweStation – Web Design & Webflow Development: Custom Cursors in Webflow
Infinite Rotation on Load
©WebDev For You
It looks simple, but I often make a mistake. Hero section, home page, there are many usages.
Text reveal masking on scroll
©pixelgeek
This function looks very useful on hero section or under hero section. Big thanks!
style with <>
.class name {clip: rect(0,auto,auto,0);}
/style with <>
*When you type the code, please remove unnesesally space. It affects to the results.
CSS: mix-blend-mode
Online Tutorials: CSS Mix Blend Mode Text Scrolling Effects – Quick CSS Tips and Tricks
MDN: mix-blend-mode – CSS
Block Reveal Effect on Load
©WebDev For You
This is familiar on Revolution Slide. This animation will work well on the project. Thanks!
Section divider/background
©Flux
Diagonal sections is not unique, but you can arrange it, circle, wave, whatever.
GetWaves.io
SVG Generator: Wavy Transitions Between Sections
Zoom-in Image Hover Effect
©WebDev For You
The hover effect is very common in WordPress. It installed at default. It means a template.
If you want something specific interaction, Webflow makes it possible, blur to clear, gray to color, hover with shadow etc. I like this flexibility.
Webflow blog: Getting started with image hover effects
Revealing an Image Interaction
©Webflow
I was looking for revealing interaction for the next project. Uber’s website is a good example. I am going to emulate it.
Webflow: Reveal elements on scroll
Collection List Layouts
©Webflow
When I start the new project, a client sometimes requires a blog/news page. In the Webflow, there is a CMS. Once you build it, client can manage even over 50 posts. When I modify a design/layout, it applies to past contents. Therefore, I have to know how to use the collection list.
Position Sticky
©Webflow
Very short description. The position sticky is quite basic for Webflow users. Even so, the position sticky still give good impression to user. I would like to use efficiently.
Switch content with scrolling interactions
©pixelgeek
Customization with position sticky. I can see this interaction often on the website. Useful.
Parallax Outline Text
©Flex
I sometimes saw this interaction. I thought text masks image. There is no one solution. He explains one of way.
CSS which he explains:
ID/Class {
/* Prefix required. Even Firefox only supports the -webkit- prefix */
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: black;
}
CSS Tricks: Adding Stroke to Web Text
Color change text animation
©pixelgeek
Logically, this is a similar interaction to how to parallax outline text in the previous video. This video is 2 hours long, but he explains the trick at 11:15. You can see the trick around 25:00. I don’t know when I can use this technique for the client’s work, but knowing is good.
Endlessly Looping Content
©Timothy Ricks
I was looking for a looping text background. I feel that there are some ways to achieve this interaction. I would like to find the easiest way to manage the contents.
Actually, pixelgeek explains how to install Infinite contents scroll. You can apply it to any contents, texts or graphics. The key is setting 0 durations on the last timed actions and setting on at the checkbox for a loop.
pixelgeek: Infinite contents scroll
Integrating Mailchimp and Webflow
©Webflow
In 2020, a website is a marketing tool. eCommerce is obvious to sell a product, but it’s possible even a standard website. A website can gather customer information/email instead of free PDF, or something value contents. In this case, we need to integrate Mailchimp in Webflow.
How to Add Google Reviews to Webflow
©Elfsight
When I develop a website for a client, I have to embed reviews. Realistically, I cannot update each review. Reviews should be automated. I am wondering how much I can customize on Webflow.
As an alternative, you can pick up 5 – 10 good reviews from Google, Facebook or Yelp. Then, just layout or apply an infinity scroll.
Better Mapping using Snazzy Maps
©Sygnal Technology
There is the map component on Webflow. It requires the API key. It’s not complicated, but I think Webflow users want to customize it. Snazzy Maps may works.
Snazzy Maps: Free Styles for Google Maps
Background Color Interaction
©Webflow
This is one of the reasons why I start to use Webflow. I saw the Heco website and I was very impressed by animation & interaction. I used it my landing page. When I could achieve it, I was so glad that. Once you got this kind of experience, you will be a Webflow user.
I found how to apply this interaction on WordPress, but Webflow is more flexible for sure.
Rotation on hover
©Webflow
I sometimes see a rotation function on the Startup/SaaS/APP website. It’s obviously for desktop first, but I am going to use it someday.
Parallax Movement on Scroll
©Webflow
There are some parallax effect tutorials by Webflow, but what I want to do is the tutorial below.
Robin G.: How to do the Parallax Scrolling Effect in Webflow
Horizontal Scroll Effect
©pixelgeek
When I watched Interaction 2.0 by Webflow, it looked magic for me. This interaction is also not universal. I’m still not sure when I can use it to client’s work. Please use a horizontal scroll when the contents fit to it.
– Creating a horizontal scrolling page
* Extra: Creating horizontal scrolling
Scrolling interactions from Apple page
©pixelgeek
Advanced. I need a reason why I use it. Otherwise, this interaction won’t fit a product or service.
Loading Animation
©Flux
It’s a smart concept. People decide to leave a website in 5 seconds. The impression would be good.
Page Transition
©Webflow
Both videos explain how to apply page transition. The second one is more clear about the code. A client won’t complain about page transition. This is the next level of interaction.
*Insert the code below in dashboard – custom code – footer code. You may use space in class name, “section inner””contents wrap” etc. Webflow takes place space to – automatically.
Set the transition elements(overlay) fixed top, x-index 1 – 9999, timed animation move, size, whatever you want.
script with <>
$(‘.class-name‘).click(function (e) {
e.preventDefault();
var goTo = this.getAttribute(“href”);
setTimeout(function(){
window.location = goTo;
},1000);
});
/script with <>
*Quotation, Double Quotation mark may not work if you copy and paste the code above. Please type manually.
Custom Code
©Jose Ocando
He dares to use code in Webflow. That’s interesting. Webflow has developed for designers who don’t have strong programming knowledge, JS. However, if you can use JS, it actually will be more flexible and interactive.
Timothy Ricks: Easy Letter Animations in Webflow
Anime.js tricksText letter animation
How to check your Webflow project for bugs or errors
©pixelgeek
I asked Webflow support a few days ago. I embedded the code for page transition on the footer. I set open a new tab on some footer menus at the same time. The window did not open a new tab. I changed the class name after all. If I knew this method, I could figure out the issue myself. Nice.
Attractive features
Through the learning process, I found some attractive functions below. These will give an impact to the client’s first impression.
Extra:
– Build a custom preloader
– Page Load Animation
– Scroll Progress Indicator
– Dark & Light mode toggle
– Creating a zoom effect with scroll interactions
– How to Webflow: Text reveal masking on scroll
– Crip-css-properties / text color
*Copy code on HTML Embed(Remove space both side of style tag/Apply same class name)
< style >
.clip {
-webkit-background-clip: text;
color: transparent !important;
}
< /style >
– Rotational parallax on hover
– Create a custom accordion
– 3D cube creation 51:37
– LiveChat widget
* Easing animation: easings.net
* Icon: Font Awesome
Purpose:
– How to translate your Webflow website and make it multilingual with Weglot
– How to create a membership site
CMS:
– CMS tutorial
– – Collection List
– – Collection Page
– How to Webflow: Styling Rich Text Elements for Webflow CMS template pages – Tutorial (2019)
*pixelgeek recommends us to use Style panel-Layout-Display-Grid rather than Collection List Setting-Layout-Column.
Bundle:
– Landing page tutorial
Idea:
– Webflow website
– iPhone XS by Apple
– iPad Pro by Apple
– Interaction 2.0
– Hello HECO
– Advanced Webflow Website Breakdown
– Flux Academy: Advanced Webflow Website Breakdown
Create wow website
It’s been a long time since I built a client website by Webflow. Therefore, I organized the previous blog.
Webflow is interesting to think about how to make a website great. Because of no limit. When I build a website by WordPress, I have to compromise some interaction design. In the Webflow, if you find a great website, you can emulate it for your next project.
One problem I always come up with that I am not a decision-maker of the platform. A client chooses it. They manage a website after the project gets done. Many people do not have experience Webflow rather than WordPress. Therefore, it’s rare if client chooses Webflow.
I feel that Webflow user in the industry is increasing, but I still don’t know how to increase the Webflow project rates myself. Will see in 2020.
👉🏻 Webflow: The Web Development Platform Of The Future
Reference:
flowbase: Webflow assets & guides
Webflow University: What do you want to learn today?
Forbes: Webflow Integrates Code-Free E-Commerce Tools Into Its Web Design Suite
Digital.com: Webflow Review – What makes this website builder so different?
