How to Use the Livin Webflow Template

This guide will help you understand how the Livin template works and how you can customize it for your own brand or project.

We recommend reading this documentation before making major changes, especially to the Style Guide, CMS Collections, and GSAP animations.

Global Styles & Design System

Livin is built using a clean and scalable design system powered by Webflow Variables and global classes.

All core design elements such as typography, colors, spacing, and reusable components are managed inside the Style Guide and Variables panel.

Any changes made here will automatically apply across the entire website.

Headings (H1–H6) and paragraphs are connected to typography variables.
Brand and accent colors are managed globally.
Buttons, sections, grids, and containers are built as reusable components.

Customizing Colors

Livin uses Webflow’s Variables System, allowing you to change the entire site’s color theme easily.

To change colors:

Open the Variables Panel
Select a color variable
Update the value

All connected elements will update automatically.

Changing Fonts

You can customize fonts from the Variables Panel or Site Settings.
From Site Settings → Fonts, you can upload custom fonts, use Google Fonts, or connect Adobe Fonts.
After adding fonts, assign them inside the Variables Panel.

Starter Page

The Starter Page provides a ready structure with a pre-built header, footer, and a blank section.

Duplicate it to quickly start building new pages.

Important Notes

SEO: Update Title Tag and Meta Description before publishing
Images: Use JPG for standard images and PNG for transparent images
Performance: Compress images to WebP or AVIF format
Clean Up: Remove unused interactions and CSS before publishing
Audit: Use Webflow Audit Panel to fix accessibility issues

GSAP Animations

Add animations by using classes like fade-up, fade-down, and reveal-text.
Remove animations by deleting the class.
Disable animations by removing the GSAP script.

Counter Animation Structure

<script>
gsap.registerPlugin(ScrollTrigger);

gsap.utils.toArray(".counter").forEach(counter => {

  const finalText = counter.textContent.trim();

  const endValue = parseFloat(finalText.replace(/[^0-9.-]/g, ""));
  const suffix = finalText.replace(/[0-9.-]/g, "");
  const decimals = finalText.includes(".") ? 1 : 0;

  // Reset to zero
  counter.textContent = "0" + suffix;

  const obj = { value: 0 };

  gsap.to(obj, {
    value: endValue,
    duration: 2,
    ease: "power2.out",
    scrollTrigger: {
      trigger: counter,
      start: "top 80%",
      once: true
    },
    onUpdate() {
      counter.textContent =
        obj.value.toFixed(decimals) + suffix;
    }
  });

});
</script>

Smooth Scroll Animation Structure

<link rel="stylesheet" href="https://unpkg.com/lenis@1.2.3/dist/lenis.css">
<script src="https://unpkg.com/lenis@1.2.3/dist/lenis.min.js"></script>
<script>
let 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);
$("[data-lenis-start]").on("click", function () {
lenis.start();
});
$("[data-lenis-stop]").on("click", function () {
lenis.stop();
});
$("[data-lenis-toggle]").on("click", function () {
$(this).toggleClass("stop-scroll");
if ($(this).hasClass("stop-scroll")) {
lenis.stop();
} else {
lenis.start();
}
});
</script>

Notes

Animations are automatically controlled by class names.
Use optimized images for better performance.
Reduced motion settings are supported.
Ensure class names are correct if animations do not work.

Instructions