WEBFLOW ELEMENTS

Welcome to my personal Webflow element library. This is where I copy and paste many of my standard elements to build and develop faster in my daily work. The library is continuously being developed and new, exciting, and innovative elements are added all the time!

You are very welcome to clone it and use it for your own websites... sharing is caring.
Computer Love 🖥❤️

Marquee

Marquee Text

ALL DAY ERR DAY
ALL DAY ERR DAY
ALL DAY ERR DAY
ALL DAY ERR DAY

Marquee Text & Logo

ALL DAY ERR DAY
ALL DAY ERR DAY
ALL DAY ERR DAY
ALL DAY ERR DAY

Marquee Logo

Buttons

CLICK ME
CLICK ME
CLICK ME
CLICK ME
Click ME

Custom Code

Lenis Smooth Scroll

Copy/Paste into Head code:
1<!--Lenis Smooth Scroll-->
2<style>
3html.lenis {
4  height: auto;
5}
6.lenis.lenis-smooth {
7  scroll-behavior: auto;
8}
9.lenis.lenis-smooth [data-lenis-prevent] {
10  overscroll-behavior: contain;
11}
12.lenis.lenis-stopped {
13  overflow: hidden;
14}
15</style>
Copy/Paste into Footer code:
1<!--Lenis Smooth Scroll-->
2<script src="https://cdn.jsdelivr.net/gh/studio-freight/lenis@1.0.23/bundled/lenis.min.js"></script> 
3<script>
4// LENIS SMOOTH SCROLL
5let lenis;
6if (Webflow.env("editor") === undefined) {
7  lenis = new Lenis({
8    lerp: 0.1,
9    wheelMultiplier: 0.7,
10    gestureOrientation: "vertical",
11    normalizeWheel: false,
12    smoothTouch: false
13  });
14  function raf(time) {
15    lenis.raf(time);
16    requestAnimationFrame(raf);
17  }
18  requestAnimationFrame(raf);
19}
20$("[data-lenis-start]").on("click", function () {
21  lenis.start();
22});
23$("[data-lenis-stop]").on("click", function () {
24  lenis.stop();
25});
26$("[data-lenis-toggle]").on("click", function () {
27  $(this).toggleClass("stop-scroll");
28  if ($(this).hasClass("stop-scroll")) {
29    lenis.stop();
30  } else {
31    lenis.start();
32  }
33});
34</script>

Resize Video Lightbox

Copy/Paste into Head code Or HTML Embed Component:
1<!--Video Lightbox-->
2<style>
3.w-lightbox-frame, .w-lightbox-embed {
4    width: 80vw;
5    height: 80vh;
6}
7</style>

Lightbox Backdrop

Copy/Paste into Head code Or HTML Embed Component:
1<!--Video Lightbox-->
2<style>
3.w-lightbox-backdrop {
4  background: rgba(0,0,0,0.2) !important;
5  backdrop-filter: blur(4px);
6}
7</style>

Lightbox Custom Close Button

Copy/Paste into Head code Or HTML Embed Component:
1<!--Video Lightbox-->
2.w-lightbox-close {
3    height: 4em;
4    background-image: url(https://cdn.prod.website-files.com/65e89f0f5cfc435a1f680a81/660143d04fde1a82ed784ecf_Video%20Luk.svg);
5    background-size: 60px;
6    right: 0;
7    margin: 0px 20px 0px 0px;
8}
9</style>

Full Screen Lottie

Copy/Paste into Settings/Custom Attributes
1<!--Name-->
2data-preserve-aspect-ratio
3
4<!--Value-->
5xMidYMid slice

Hide Page Scrollbar

Copy/Paste into Head code:
1<!--Hide ScrollBar-->
2<style>
3::-webkit-scrollbar {display: none;}
4{
5-ms-overflow-style: none;  /* IE and Edge */
6scrollbar-width: none;  /* Firefox */
7}
8</style>