• Run code after 1,000 milliseconds (1 second)

<script>
setTimeout(() => {  
	// your code here
}, 1000);
</script>

• Run code every 1,000 milliseconds (every 1 second)

<script>
setInterval(function () {
	// your code here
}, 1000);
</script>

• Give the element attribute name and value of data-copy="Your text to copy"
• On click of the element, the attribute value will be copied to clipboard

<script>
document.addEventListener("DOMContentLoaded", function () {
	document.addEventListener("click", (e) => {
		const el = e.target.closest("[data-copy]");
		if (!el) return;
		navigator.clipboard.writeText(el.getAttribute("data-copy") || "");
	});
});
</script>

• Run code when page scroll direction changes

<script src="https://cdn.jsdelivr.net/npm/gsap@3.13.0/dist/gsap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/gsap@3.13.0/dist/ScrollTrigger.min.js"></script>
<script>
document.addEventListener("DOMContentLoaded", () => {
	gsap.registerPlugin(ScrollTrigger);

	let lastDirection;
	ScrollTrigger.create({
		trigger: document.body,
		start: "top top",
		end: "bottom bottom",
		onUpdate: (self) => {
			if (lastDirection === self.direction) return;
			lastDirection = self.direction;
			if (self.direction === 1) {
				console.log("Page scrolled down");
			} else {
				console.log("Page scrolled up");
			}
		}
	});
});
</script>

• Run JavaScript based on screen size on page load and when crossing between breakpoints

<script>
document.addEventListener("DOMContentLoaded", () => {
	function checkBreakpoint(x) {
		if (x.matches) {
			// desktop code here
		} else {
			// tablet & below code here
		}
	}
	const matchMediaDesktop = window.matchMedia("(min-width: 992px)");
	checkBreakpoint(matchMediaDesktop);
	matchMediaDesktop.addListener(checkBreakpoint);
});
</script>

• Give the section a class of your-section
• Give the cms items a class of your-cms-items
• Give the text element that should display the number of cms items a class of your-number-text

<script>
document.addEventListener("DOMContentLoaded", () => {
 	document.querySelectorAll(".your-section").forEach(component => {
		const itemTotal = component.querySelectorAll(".your-cms-items").length;
		component.querySelectorAll(".your-number-text").forEach(el => el.textContent = itemTotal);
	});
});
</script>

• Between two screen sizes

<style>
@media screen and (min-width: 992px) and (max-width: 1200px)  {
	body { background-color: red; }
}
</style>

• Desktop only

<style>
@media screen and (min-width: 992px) {
	body { background-color: red; }
}
</style>

• Tablet & below only

<style>
@media screen and (max-width: 991px) {
	body { background-color: red; }
}
</style>

• Non-touch devices only

<style>
@media (pointer: fine) {
	body { background-color: red; }
}
</style>

• Prefers reduced motion

<style>
@media screen and (prefers-reduced-motion: reduce) {  
	body { background-color: red; }
}
</style>

• Prefers contrast

<style>
@media (prefers-contrast: more) {
	body { background-color: red; }
}
</style>

• Prefers dark mode

<style>
@media screen and (prefers-color-scheme: dark) {
	body { background-color: red; }
}
</style>

• Give element an attribute name of data-hide-scrollbar

<style>
[data-hide-scrollbar]::-webkit-scrollbar {
	display: none;
}
[data-hide-scrollbar] {
	-ms-overflow-style: none;
	scrollbar-width: none;
}
</style>

<style>
/* Create a repeating pattern every 3 items */
.your-cms-item:nth-child(3n+1) { background-color: red; }
.your-cms-item:nth-child(3n+2) { background-color: blue; }
.your-cms-item:nth-child(3n+3) { background-color: green; }

/* Create a repeating pattern every 3 items while targeting the item's children */
.your-cms-item:nth-child(3n+1) .item-child { background-color: yellow; }
.your-cms-item:nth-child(3n+2) .item-child { background-color: green; }
.your-cms-item:nth-child(3n+3) .item-child { background-color: purple; }

/* Target the 1st, 2nd, and 3rd item with no repeating pattern */
.your-cms-item:nth-child(1) { background-color: red; }
.your-cms-item:nth-child(2) { background-color: blue; }
.your-cms-item:nth-child(3) { background-color: green; }
</style>

• Give the section an attribute name of data-scroll-snap
• When we stop scrolling, the page will scroll to the nearest section with that attribute

<script src="https://cdn.jsdelivr.net/npm/gsap@3.13.0/dist/gsap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/gsap@3.13.0/dist/ScrollTrigger.min.js"></script>
<script>
document.addEventListener("DOMContentLoaded", () => {
	gsap.registerPlugin(ScrollTrigger);
	document.querySelectorAll("[data-scroll-snap]").forEach((component) => {
		ScrollTrigger.create({
			trigger: component,
			start: "top top",
			end: "bottom top",
			scrub: true,
			snap: {
				snapTo: [0, 1],
				duration: { min: 0.05, max: 0.3 },
				delay: 0,
				ease: "power1.inOut"
			}
		});
	});
});
</script>

• Run GSAP code only for certain screen sizes

<script>
document.addEventListener("DOMContentLoaded", () => {
	// only on the desktop breakpoint
	gsap.matchMedia().add("(min-width: 992px)", () => {
		// your gsap timeline here
	});
});
</script>

• Run GSAP code with multiple breakpoints

<script>
document.addEventListener("DOMContentLoaded", () => {
	let mm = gsap.matchMedia();
	// on desktop
	mm.add("(min-width: 992px)", () => {
		// your gsap timeline here
		return () => {
			// optional: clean up non-gsap code when leaving this breakpoint
		};
	});
	// on tablet and below
	mm.add("(max-width: 991px)", () => {
		// your gsap timeline here
	});
	// on tablet only
	mm.add("(max-width: 991px) and (min-width: 768px)", () => {
		// your gsap timeline here
	});
});
</script>

• Give an element or section the attribute name of data-refresh-scrolltrigger
• When the element first enters view, it will refresh ScrollTrigger's markers
• This is helpful if ScrollTrigger's positions are getting out of sync from the page height changing.

<script>
document.addEventListener("DOMContentLoaded", () => {
	if (typeof ScrollTrigger === "undefined") return;
	document.querySelectorAll("[data-refresh-scrolltrigger]").forEach(target => {
		const observer = new IntersectionObserver((entries, observerInstance) => {
			entries.forEach(entry => {
				if (!entry.isIntersecting) return;
				ScrollTrigger.refresh();
				observerInstance.unobserve(entry.target);
			});
		}, { threshold: 0.1 });
		observer.observe(target);
	});
});
</script>

• Give any child of the dropdown an attribute name of data-dropdown-close to close the dropdown on click of that child

<script>
document.addEventListener("DOMContentLoaded", function () {
	document.addEventListener("click", (e) => {
		if (!e.target.closest("[data-dropdown-close]")) return;
		const dropdown = e.target.closest(".w-dropdown");
		dropdown?.dispatchEvent(new CustomEvent("w-close", { bubbles: true }));
		dropdown?.dispatchEvent(new CustomEvent("w-dropdown", { bubbles: true }));
	});
});
</script>

• Animate item based on its horizontal position within parent
• When .item is horizontally centered within .your-section, it will be at the middle of the GSAP Timeline
• Animate the item's transforms or its parent's transform by placing it in a slider, marquee, or horizontal scroll

<script src="https://cdn.jsdelivr.net/npm/gsap@3.13.0/dist/gsap.min.js"></script>
<script>
document.addEventListener("DOMContentLoaded", () => {
	document.querySelectorAll(".your-section").forEach((component) => {
  
		component.querySelectorAll(".item").forEach((item) => {
			gsap.context(() => {
				let tl = gsap.timeline({ paused: true, defaults: { ease: "none" } });
				tl.fromTo(item, { opacity: 0.1, scale: 0.5 }, { opacity: 1, scale: 1 });
				tl.fromTo(".item-image", { scale: 1.2 }, { scale: 1 }, "<");
        
				tl.to(item, { opacity: 0.1, scale: 0.5 });
				tl.to(".item-image", { scale: 1.2 }, "<");
        
				function animate() {
					const rect = item.getBoundingClientRect();
					const compRect = component.getBoundingClientRect();
					let progress = Math.max(0, Math.min(1, (compRect.right - rect.left) / (rect.width + compRect.width)));
					tl.progress(progress);
					requestAnimationFrame(animate);
				}
				requestAnimationFrame(animate);
			}, item);
		});
	});
});
</script>

• Animate item based on its vertical position within parent
• When .item is vertically centered within .your-section, it will be at the middle of the GSAP Timeline
• Animate the item's transforms or its parent's transform by placing it in a slider, marquee, or scroll

<script src="https://cdn.jsdelivr.net/npm/gsap@3.13.0/dist/gsap.min.js"></script>
<script>
document.addEventListener("DOMContentLoaded", () => {
	document.querySelectorAll(".your-section").forEach((component) => {
  
		component.querySelectorAll(".item").forEach((item) => {
			gsap.context(() => {
				let tl = gsap.timeline({ paused: true, defaults: { ease: "none" } });
				tl.fromTo(item, { opacity: 0.1, scale: 0.5 }, { opacity: 1, scale: 1 });
				tl.fromTo(".item-image", { scale: 1.2 }, { scale: 1 }, "<");
        
				tl.to(item, { opacity: 0.1, scale: 0.5 });
				tl.to(".item-image", { scale: 1.2 }, "<");
        
				function animate() {
					const rect = item.getBoundingClientRect();
					const compRect = component.getBoundingClientRect();
					let progress = Math.max(0, Math.min(1, (compRect.bottom - rect.top) / (rect.height + compRect.height)));
					tl.progress(progress);
					requestAnimationFrame(animate);
				}
				requestAnimationFrame(animate);
			}, item);
		});
	});
});
</script>

• With GSAP Context, we can pass class names directly into our timeline, and it will only target children of the current component.

<script src="https://cdn.jsdelivr.net/npm/gsap@3.13.0/dist/gsap.min.js"></script>
<script>
document.addEventListener("DOMContentLoaded", () => {
	document.querySelectorAll(".your-section").forEach((component) => {

		gsap.context(() => {
			let tl = gsap.timeline();
			tl.from(component, { opacity: 0, y: "2rem" });
			tl.from(".child-image", { scale: 1.2 }, "<");
		}, component);

	});
});
</script>

• Without GSAP Context....

tl.from(component.querySelectorAll(".child-image"), { scale: 1.2 }, "<");

• With GSAP Context....

tl.from(".child-image", { scale: 1.2 }, "<");

• Add attribute name of data-low-power-hidden to custom element with video tag
• Include code in site settings footer code
• Video will have opacity 0 until it starts playing. Since it never starts playing in lower power mode, it will remain hidden.

<style>
[data-low-power-hidden] { opacity: 0; transition: opacity .3s ease; }
</style>
<script>
document.addEventListener("DOMContentLoaded", () => {
	document.querySelectorAll("[data-low-power-hidden]").forEach(video => {
		const reveal = () => video.style.opacity = "1";
		video.addEventListener("playing", reveal);
		if (!video.paused && video.readyState >= 2) reveal();
	});
});
</script>

• Include code in site settings head code
• Add class in style panel of u-prevent-flicker to your animated element or parent of the animated elements
• Remove class with JS or Webflow Interactions before the animation starts
• Element will only be hidden in browsers that support JS.

<style>.u-prevent-flicker { visibility: hidden; }</style>
<noscript><style>.u-prevent-flicker { visibility: visible; }</style></noscript>

• Add this CSS to an embed on your page
• Give your animated text element a class of u-split-fix
• Adjust the top, right, bottom, and left offset amount based on your font so nothing gets cut

<style>
.u-split-fix div[style*="overflow: clip;"] {
  --offset-top: 1em;
  --offset-right: 1em;
  --offset-bottom: 1em;
  --offset-left: 1em;
  overflow: visible !important;
  clip-path: polygon(
    calc(0% - var(--offset-left)) calc(0% - var(--offset-top)),
    calc(100% + var(--offset-right)) calc(0% - var(--offset-top)),
    calc(100% + var(--offset-right)) calc(100% + var(--offset-bottom)),
    calc(0% - var(--offset-left)) calc(100% + var(--offset-bottom))
  );
}
</style>

<link rel="stylesheet" href="https://unpkg.com/lenis@1.3.17/dist/lenis.css">
<script src="https://unpkg.com/lenis@1.3.17/dist/lenis.min.js"></script> 
<script>
let lenis;
document.addEventListener("DOMContentLoaded", () => {
  lenis = new Lenis({
    lerp: 0.1,
    wheelMultiplier: 0.7,
    gestureOrientation: "vertical",
    normalizeWheel: false,
    smoothTouch: false,
  });

  function raf(time) {
    lenis.raf(time);
    requestAnimationFrame(raf);
  }
  requestAnimationFrame(raf);
});
</script>

• Run lenis.stop() to disable scroll
• Run lenis.start() to enable scroll