My FeedDiscussionsHeadless CMS
New
Sign in
Log inSign up
Learn more about Hashnode Headless CMSHashnode Headless CMS
Collaborate seamlessly with Hashnode Headless CMS for Enterprise.
Upgrade ✨Learn more
+10 Javascript Powered Webflow Websites

+10 Javascript Powered Webflow Websites

No-code is great, but with a little bit of code it could be super.

Serhad İletir's photo
Serhad İletir
·Jan 17, 2022·

4 min read

I have been using Webflow for many years. I discovered it while building my first startup. I had an idea, but I didn't know how to write a single line of code. I made queries to Google to see if there was a solution to this desperate situation.

That's how I discovered webflow and built my first startup idea, even featured on news sites (Turkish media). But the attempt was not successful, but it gave me wonderful talent.

Recently, I've been using custom js on all WF sites I've developed. Usually my first resource is Codepen. Now I will show my favorite js powered sites.

CMS Sliders with Swiper JS ( clonable )

CMS Sliders with Swiper JS.png Making a Native slider with CMS items is not yet possible in webflow. Maybe in 2022, there will be a development related to this feature, but for now, there is no other option but to use custom solutions. Fortunately, the Flow Ninja design studio has come up with a great solution.

Spacebar Counter

spacebar-counter-home-page.png With these few lines of js code, a feature that is normally impossible in webflow becomes possible. Simple design and successful use of color.

Numbered Pagination ( clonable )

numbered-pagi.png Native pagination is normally possible but limited in customization. For example, although users like to use pagination, they feel more secure if they know how many pages of content there are. A little js help is needed to do this too.

Advance Scroll With Scrollify.js ( clonable )

scroll-js.png If there's one thing we know for sure about user experience, it's that users love to scroll. If it were otherwise, apps like Twitter and TikTok wouldn't exist today. With Scrollify.js, you can customize your scroll experience.

Slider With Counter ( clonable )

cybora-template.png Sliders consist of an average of 5 items, I showed the example above that allows you to make a slider from CMS. This one is a little different. It makes it look cooler on which slide it's on. In fact, the entire website is really well designed.

jQuery Hover Interaction ( clonable )

jquery.png You can already make great hover animations with Webflow. You could even do this example above. But when you do it natively, it may take some time. Isn't that actually a bit ironic? In a tool we use to build a faster website, we have the option to use code to do some things faster.

Draggable Map ( clonable )

draggble.png Timothy makes new miracles possible every day. Of course, these are no-code miracles. This draggable map is one of the most advanced projects I've ever seen.

CMS Filters ( clonable )

cms-filter.png The filtering thing is still very primitive. I think this situation will change next year, but for now, this template is the best solution. It becomes very easy to create cms filters with custom variables.

Auth0 Template ( clonable )

auth0-templatek.png Content gateway is so popular for now. There are three monetization methods for a creator. The first of these is advertising. However, this method is not very profitable. Another method is affiliation. This can often be limited. It's profitable, but the number of products you can affiliate with is limited. The third and most logical is the premium subscription method. In this, you need to create paid gates similar to the above.

Multi Category Tag ( clonable )

tag-filter.png It is difficult to organize CMS items. Usually there are static solutions. If you are looking for a dynamic solution, I suggest you review the template above.

Read Time Calculator ( clonable )

read-time-calculator.png Reading time calculation is actually very simple. 200 words in 1 minute (average) This is easy to calculate with 1 line of js code. If you want to add such a calculation to your own content, the template above is more suitable for you.

This is the end of the article. If you know any other JS powered websites, reach me on Twitter. I would like to update this article.