Instructions

1. Getting Started

Introduction

Auria brings a more structured, refined approach to business templates. Built with smooth scroll interactions and a clean, elegant visual language, it focuses on clarity without feeling rigid. The 23-page multi-layout system allows you to build flexible, well-balanced pages that feel consistent from start to finish.

Webflow basics

If you're new to Webflow, we recommend watching the Getting Started with Webflow course on Webflow University. It covers the essential tools and concepts you'll need to confidently use and customize this template.

Lenis smooth scroll

This template uses Lenis to create a smooth, modern scrolling experience across all pages. Lenis replaces the browser’s default scroll behavior with a more fluid and refined motion, enhancing the feel of animations and transitions throughout the site.

This is handled entirely through custom code added in your Site Settings.

Where the code is added

Head tag

In your Webflow Site Settings, under the Custom Code → Head section, the following code loads the Lenis script and stylesheet:

<!-- Lenis script and styles -->
<script src="https://unpkg.com/lenis@1.3.4/dist/lenis.min.js"></script> 
<link rel="stylesheet" href="https://unpkg.com/lenis@1.3.4/dist/lenis.css">

This makes the Lenis library available globally across your project.

Before </body> tag

Also in Site Settings, scroll to the Custom Code → Before </body> tag section and you'll see the initialization script:

<!-- Lenis setup -->
<script>
// Initialize Lenis
const lenis = new Lenis({
  smooth: true,
  lerp: 0.1,
  wheelMultiplier: 1,
  infinite: false,
});

// Use requestAnimationFrame to continuously update the scroll
function raf(time) {
  lenis.raf(time);
  requestAnimationFrame(raf);
}

requestAnimationFrame(raf);
</script>

This script starts the smooth scrolling effect and keeps it running as the user interacts with the page.

How to disable the animation (optional)

To temporarily disable Lenis without deleting your code:

• Comment out both script blocks like this:

<!-- 
ALL THE CODE HERE
-->

This will stop the animation from running but retain the code for later use. You can also just delete the entire code and put it back again if you want to have the smooth scroll in the future.

How to adjust the scroll speed

The scroll behavior can be fine-tuned inside the second script:

lerp: 0.1,

This controls how smooth and slow the scroll feels:

• Lower values (e.g. 0.05) = slower and smoother
• Higher values (e.g. 0.2) = snappier and faster

You can also tweak:

wheelMultiplier: 1,

This controls how sensitive scroll input is on the mouse/touchpad. Increase the value to make it scroll farther with each scroll input.

Counter number animation

This script animates numbers from 0 to their final value when they scroll into view.

How to use

Add the class below to any number:

• counter_number → whole number
• counter_number cc-decimal → decimal (e.g. 4.8)
• counter_number cc-comma → large numbers (e.g. 120,000)

Change the number

Just edit the text inside the element in the Designer.

Change animation speed

In the code, update:

duration: 3,

Change trigger point

Update:

start: 'top 85%',

Disable animation

• One number: remove counter_number class
• All: remove the script

Support

If you run into any issues or have questions while customizing the template, feel free to reach out. We are here to help! Just send a message through the support form on our website, and we’ll get back to you as soon as possible.