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

Swap Headlines

Swap Headlines Animation

Experimental site that demos z-axis scroll interactions using div blocks. Images and fonts blur when moved forwards or backwards on the z-axis but div blocks don't! Thanks for looking! :-) Jan 2022: z-axis transforms and perspective now a bit broken :-(

Quanto Font

Quanto

From my Webflow online course community came the wish to build this video player, which basically runs in a loop without sound as a background video. 
If you click on on the unmute button, the video plays from the beginning and the sound is activated.  

We need a bit of custom jQuery code for this. In addition, the Vimeo API must be included if you want to address Vimeo iFrames.

Watch the tutorial here: https://youtu.be/mKFZxHpYGng

Vimeo Background Video with Play Sound Toggle

Welcome to daily interaction #101!

This demo showcases an infinite logo carousel on page load. There are two rows of logo placeholders that both move at different speeds. You can replace the logo text with an image, and change all the colors to match your brand.

For this I used Flexbox to create equal distance block widths, and then for the more square blocks I give it a specific width and height of 100 by 100. For smaller devices the blocks are all the same size.

The effect was achieved by having two rows next to each other and once one row goes out of view it starts at the beginning to create the infinite loop effect.

*The only caveat with this interaction is that if you navigate away from the page the animation does not loop and the timing starts to get altered for the logos.

The WebDev For You Slack Channel is also open so be sure to subscribe if you have any questions or want to know more about each interaction!

https://www.webdevforyou.com/

WebDev for You - Daily Interaction #101

WebDev For You - Daily Interaction #101

Hi my gorgeous friends of Webflow,

This project contains an infinitely looping marquee with stop on hover.
Just a bit of css needed to build a pretty fancy functionality. :)

But if you feel adventurous, click on the button to activate jQuery super-powers! :)

Enjoy and feel free to leave a comment!

******* PROJECT UPDATE *******
Just added a second page to the project to account for vertical marquee scrolling! :)

Infinite Marquee With Stop On Hover

Welcome to my Dribbble series, a new effort in which I attempt to bring to life interactions created by popular Dribble artists using only the elements supplied by Webflow! Todays project is "Page Indicator Exploration" by user Oleg Frolov (https://dribbble.com/shots/5254763-Page-Indicator-Exploration). Kick back, relax, enjoy some smoothe indicators, and clone away!

Do you think I could've done something different or better? I'd love to hear your thoughts in the comments!

Loading Indicator Exploration

Page Indicator Exploration [Oleg Frolov] - Joshwork Dribbble Series

Native Marquees

Hi my gorgeous friends of Webflow,

This project contains a fancy 3D looping card animation, built with absolutely no code.

Enjoy and feel free to leave a comment!

3D Looping Card Animation

The site that never ends. Just demonstrating a piece of custom code that enables continuous scroll forever by cloning the body. Why would you want that? Who knows, but here it is!

Please feel free to clone this cloning clone, but use with caution!

Forever scroll

Forever Scroll

BuildBites

Hey there!👋
We have build a simple, yet elegant, infinite scrolling marquee, that powered by native Webflow CMS.

You don't have to worry about manually place all new images (logos, e.x.), just update the CMS collection and pick the marquee that better fits your needs and that's all.

The template contains a three options for marquee:
- Small
- medium
- Large

P.s. Need a website? Drop us a line at hi@buildbites.com.
We provide an unlimited Webflow development for a flat monthly fee!

Use it freely! :)

Infinite scroll cms marquee

Infinite scroll marquee carousel

With this technique popping up more and more I decided to learn it myself, and this is the result. Feel free to clone it, sharing is caring!

---
👋 I'm available for work: ForsJonathan.com

Taradiddle

Infinite looping horizontal marquee animation

Launched as a self-initiated project, Philia is your destination for true relaxation, memorable culinary experiences and the magic of solitude within the tranquility of stillness.

Our key concerns were how to make the website reflective of a chic, yet cozy boutique hotel that provides guests with a one-of-a-kind experience, and most importantly, how to encourage more visitors to book a stay.

We opted for a web design that is held in subtle, natural, muted colors to mirror the core values of Philia. In order to familiarize future customers with the Greek island the hotel is located in (and to invite previous ones to reminisce), the website features an array of visuals showcasing the regional, mediterranean aesthetic. To round it all off, animations allow for settle movements and minimalistic interactions, effortlessly guiding guests through what may very well be the most relaxing booking experience ever.

Discover looping websites built by the Webflow community

Discover looping websites built by the Webflow community