Discover the best page-load websites created by professional designers. Get inspired and start planning your perfect page-load 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

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

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

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

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

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]

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

Assets from codesandbox.io

Persistent Dark Mode Switch

Rebranding and new website for deduxer studio

deduxer

Deduxer Studio

This is a rebuild of the hero section from this super cool site https://ark-shelter.com/

ark-shelter-rebuild

Hero Load in

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

Each icon on this fixed nav element links to a new page which loads seamlessly. 

This is valuable for analytics or conversion tracking while keeping the experience seamless.

Responsive menu adapts to bottom of screen on mobile for ease of use as well. 

Enjoy! 

____________

To customize the menu - 

1- Open the symbol and change the icon image and label
2- Change individual page names to match menu labels
3- Change accent color swatches
4- Build out page content

To add a new page - 

1- Copy the "icon wrap" element in the menu to create a new page link
2- Edit the icon image and label
3- Be sure "Menu transition" interaction is active on the icon wrap link
4- Create a new page and add a page load animation
     4.1- When page starts loading should be set to - "Page Loader" interaction
     4.2- When page finishes loading should be set to - "Page Open" interaction

Leave a comment if you have any questions and check custom code section for Javascript snippet.

Seamless Page Tabs

Just some simple page transitions. Saw a site similar to something like this the other day, they used barba.js library. I just did a simple js which can be found in the home page script.

SimplePageTransitions

simplepagetransitions

This is a simple mouse scroll animation with a dot moving from the top to the bottom and then repeating. This can make for a nice animation to let users know to scroll down.

Discover page load websites built by the Webflow community

Discover page load websites built by the Webflow community