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

Ambient parallax template for portfolio with scroll animation. Custom preloader and fun animation on social network buttons.

Last updated on 17 December 2022.
- Upgraded the classes with the basic principles of the Finsweet Client-First system
- Add Guide Style for your project
- Improved animations

Parallax portfolio

Parallax template

I recently saw the "Unstoppable" site on Awwwards (http://unstoppable.preciosacomponents.com) and of course I wondered if I would be able to recreate it in Webflow. And so I did, but in a Norway theme instead. 🤙

Please let the background video load for a bit, since there's no preloader.

Background video by Pexels.

This Is Norway

This is Norway

Redis Team

In just a year with Webflow, we have launched dozens of projects, won international awards and expanded the team to 6 creative developers. It is about time that we open a separate department for creative development. We are celebrating this by launching the Webflow department website.

This landing page is dedicated to our love for Webflow, our clients and their projects, and our team. It also showcases the new corporate identity of Redis Agency. Noteworthy that smooth scroll and while scrolling in view animations are implemented without code.

Click the link to see it for yourself. Let it Webflow!

Redis Webflow

Redis Agency Webflow

100% Webflow Pre-Load Entrance Animation with one exception. The number counter is using jquery but this can be removed via the custom code panel (footer).

Pre-Loader

Pre-Loader-Animation

Digital Designer & Visual Developer based in Enschede, Netherlands. Creating digital experiences with an eye for design and motion.

Dylan Brouwer 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

I liked Bertani's horizontal scrolling website so much that I rebuilt it in Webflow.

Almost no custom code was used. I used just a little for insignificant stuff such as hiding the scrolling bars, adding the difference blend mode to the cursor, creating the countdown year effect in the preloader, and adding an outline to the text in the menu.

Clone it and have a look through it.

--

Want to learn how it was created? Subscribe to my YouTube channel (tutorials for this website coming soon) 👉 youtube.com/channel/UCgwvah4M6Anta4_5ACFiuRQ

__

• Do you need web design & development? Get in touch 👉 bjorn-encutescu.webflow.io/

• Follow my daily tips on Instagram 👉instagram.com/bjorn_encutescu/

Bertani Webflow Rebuild

Bertani Webflow Rebuild - Horizontal Scrolling Website

Circle Zoom Effect

CircleZoom

Live site: https://www.lisaribeiro-photographe.fr/

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

Disclaimer: This project was made for educational purposes and is not affiliated with Lisa Ribeiro in any way. All rights of the images, logos, and texts belong to Lisa Ribeiro.

------------------------------------------------
Have a new project in mind? Let's chat -
🟢 https://cal.com/chintan/30min

Contact:
📭 hello@chintan.design
🌎 https://chintan.design
🐥 https://twitter.com/heyychintan
------------------------------------------------

Lisa Ribeiro

Lisa Ribeiro Portfolio Rebuild

MIGHT HAVE DELETED THE SANDBOX WITH THE CODE :), project is dead until I recover it (probably never)

WebGl (THREE.js) based circular drag+scroll slider with nice (potential) transition as seen on awwwards. All data pulled from our beloved CMS.
Clone away!

* Will love a preloader, and an image does not load just needs to be switched up but no time fo that!
* Mobile only for now, and wheel event is not really cross browser!


👀
@fpalla

hwf-lionsgoodnews

Lions Slider WebGl ⟋ webgl

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

So, I recently joined the Webflow Party community. And someone was wondering how to recreate the loading animation on the 'Loftgarten' website by Niccolò Miranda. So I decided to give it a shot, and recreated the layout and animation.

Original site: https://www.loftgarten.co
Credits belong to Niccolò Miranda - thanks for inspiring us!

Images by Elia Pellegrini through Unsplash.

Loftgarden loading animation

Loftgarten inspired page load animation

Pretty Nice Websites

Playing around with Lottie. Here we're using a lottie animation for the pre loader. You can adjust the timing on the preloader itself in the interactions panel. Let us know what you think!

Lottie preloader

Lottie pre-loader

Solar Eclipse Loader

solar-eclipse-loader

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]

Start your website with our cloneable hero section design perfect for Photographers 📷 and Videographers 🎥

Components & Features:

⦿ Stylish 3-column slider with large images
⦿ Modern page load 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:

⦿ Images used in the design are from Pexels and are licensed under CC0 license.

⦿ Iconography from FontAwesome

⦿ Heading Font - "Sonder" downloaded from PixelSurplus
https://pixelsurplus.com/products/sonder-regular-free-font

THS08

Photography Design 2 Cloneable Hero Section

Simple svg loaders. Copy and paste to your project

SVG loaders

svg-loaders

Start your website with our cloneable hero section design perfect for Photographers 📷 and Videographers 🎥

Components & Features:

⦿ Slider with custom line style navigation
⦿ Modern page load 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:

⦿ Images used in the design are from Pexels, Unsplash, and Pixabay, and are licensed under CC0 license.

⦿ Iconography from FontAwesome and OrionIconLibrary

⦿ Heading Font - "Sonder" downloaded from PixelSurplus
https://pixelsurplus.com/products/sonder-regular-free-font

Discover pre load animation websites built by the Webflow community

Discover pre load animation websites built by the Webflow community