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

One of my frustrations with Webflow transitions is that achieving a good horizontal scroll effect with things like parallax is not possible out of the box. The "while scrolling in view" trigger only works for vertical scroll. So, after some trial and errors, I came up with a setup that gets the job done!

Hokaido is a free template focused on images and horizontal scroll. It's main features are:

1. Works well with CMS - no need to manually tweak any transitions, the horizontal scroll works with any number of CMS elements.

2. Parallax effects - create cool horizontal parallax effects, with the current setup, it just works!

3. Cool page transitions - go from page to page with a smooth transition between different projects.

Want to know how the trick is done? Clone it, change it, make it your own!

Hokaido

Hokaido - Free Horizontal Scrolling Template

In January I started a new series, in which I built a marketing website for the car manufacturer startup Sono Motors. The idea was to present the features and benefits of the solar car SION and to implement them interactively in Webflow. The website was created during their #SaveSion campaign, in which the company had raised more money for the production of the car. In addition to my down payment, I saw the project as an additional support to help the startup by raising awareness about the campaign through my own channels. 

This project resulted in 10 Webflow YouTube tutorials. I published the responsive design process via my Patreon account. 
The image copyright belongs to Sono Motors GmbH.

Click here for the YouTube playlist with all videos of this project: https://youtube.com/playlist?list=PLj8c0yntElwWRnvBXxEnoxkynxriQKndL

Follow the responsive design process on my Patreon account: https://www.patreon.com/posts/77302808

Learn more about the Sion: https://sonomotors.com

SION – #SaveSion

SION – Car Startup Website (free Template)

Watch the tutorial for this at https://www.youtube.com/watch?v=zTLWgLFfdJ0

Page Loader

Adaptive Page Loader

Carly Bruce Harvey

Feel free to clone and use this as a template to get started on your non-profit projects! 

This template is based off of an Adobe XD freebie file and tailored to play nicely with Webflow's native components. 

Credit to the original design and design files goes to Meagan Fisher and Lindsay Munro over on Behance. Check the footer of the site to get a link straight to where you can download the file for yourself.

Nonprofit XD Freebie

Carly Bruce Harvey Free Cloneable: Green Trees Nonprofit

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

Based on https://kirschberg.co.nz/

Liquid Nav Links

AWGE is a creative agency created by A$AP Rocky. Their website was originally developed by Sehmon Burnam (@sehmonb), Alex Shortt (@_alexshortt), Wally Sajimi (@wallypdf), and others. Handles are for Twitter.

This is for educational purposes only.

AWGE

AWGE, an agency founded by A$AP Rocky

Some slick page pre-loader. Wrapped in component with some custom code in page settings.

Open live site to see it in action! // Custom code included

Fully customizable:
- change variables in custom code to adjust duration;
- adjust pre-loader hide-animation to match your style;
- change copy (loading)
- it inherits typography from body all pages tag.

Copy and paste it into your project, simple as that.

__
Inspired by Timothy Ricks' YT video.

Sleek site preloader (Cloneable)

Sleek Site Preloader [Cloneable]

Based on https://kirschberg.co.nz/

Transition Tutorial: https://www.youtube.com/watch?v=fBU4mLX45HU

AJAX Tutorial: https://www.patreon.com/posts/57982049

Overlapping Page Transition

Start your website with our cloneable hero section design perfect for Agency Portfolio 💼

Components & Features:

⦿ Simple yet elegant design
⦿ Background gradient change animation
⦿ Full-Screen Hamburger Menu

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

Like this cloneable?  👍 

We're coming soon with a huge library of more such high-quality and free cloneable hero section designs for every kind of website built in Webflow.

For more FREE CLONEABLES
→ https://theherosection.webflow.io/

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

Support:

If you have any difficulty in understanding the design or any part of it, please feel free to comment below. Alternatively, you can send us an email here: support[at]theherosection.com

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

License:

⦿ Background Mesh Gradients from - https://www.meshgradients.design/

⦿ Iconography from FontAwesome

⦿ Heading Font - "Silk Serif" downloaded from FontShmonts
https://www.fontshmonts.com/text-fonts/silk-serif/

THS12

Agency Cloneable Hero Section

Rebranding and new website for deduxer studio

deduxer

Deduxer Studio

Italic CMS is a powerful Webflow template that combines a modern, clean design giving you all the options for a unique website. Built to help you create a responsive website to support your SaaS business growth.

Italic CMS - MadeInWebflow

Italic CMS - SaaS Webflow Template

Berlin is a premium one-page Webflow template for SaaS, desktop & mobile, for the modern tech brands. Created to help you craft a visually stunning, seamless, fast-loading website for your software company.

Berlin - MadeInWebflow

Berlin - SaaS Webflow Template

Custom preloader animation, side-to-side curtain sliding out style.

If you need help in implementation, DM me. I'll be around.

Have fun cloning. 😄

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

🚀 Our cloneable library: 
https://www.sketchzlab.com/resources/overview

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

💖☕ Support us by buying us a cup of 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

sketchzlab-cloneable-18

Custom Preloader Animation - Side-to-side Slide Out

Vancouver is a dark one-pager template for SaaS. Vancouver was created to help you manage your business as quickly and efficiently as possible. You can use the template in a variety of industries thanks to its clear and straightforward design.

Vancouver - MadeInWebflow

Vancouver - SaaS Webflow Template

Watch tutorial at https://www.patreon.com/posts/66950007

Assets from codesandbox.io

Persistent Dark Mode Switch

Hey guys,

today's cloneable is a very very simple but useful one. If you'd like to delay your page load after clicking on a button that leads to a new page for example and you want to add an animation in between, you can do this with the little custom code and Webflow Interactions that are used in this cloneable here. Hope you can use this in a future project! 

✅ 100% CSS
✅  Custom Code
🆓 Cloneable

Follow me for more Webflow freebies in the future 💙

Delayed Page Transition

delayed-page-transition

page-load animation with grid, using an overlay on the image to create a unique timed reveal. First broke the stock image into 6 frames.

Boxes on Boxes | Reveal Animation

Boxes Portrait Reveal

Brooklyn the perfect template for your creative agency website. Whether you’re a Designer, Agency, or Creative Studio, Brooklyn template will take your online presence to a higher level.

Discover pageload websites built by the Webflow community

Discover pageload websites built by the Webflow community