Learn with Webflow University
Webflow University offers step-by-step lessons, videos, and guides to help you master Webflow at your own pace. Explore tutorials for both beginners and advanced users.
The Webflow Way
A practical guide to Webflow best practices. Learn how to structure projects, use components efficiently, manage CMS, and build scalable websites that grow over time.
Webflow Tutorial: The Absolute Beginner's Guide
New to Webflow? This tutorial walks you through what to expect and what to do when you first sign up, helping you get started with confidence.
GSAP Animations
This template uses native GSAP animations powered by custom data attributes.
Fade In Animation
Animates elements on scroll.
data-fade-in="element"
Word Animation
Animates text word-by-word.data-fade-in-stagger="word"
Line Animation
Animates text line-by-line.data-fade-in-stagger="line"
For guidance, refer to the official GSAP documentation and Webflow University.
Lenis – Smooth Scroll
Lenis is the leading smooth scroll library for the web. Lightweight, performant, and accessible — used by top agencies and developers worldwide.
<!-- Lenis Smooth Scroll -->
<link rel="stylesheet" href="https://unpkg.com/lenis@1.3.23/dist/lenis.css">
<script src="https://unpkg.com/lenis@1.3.23/dist/lenis.min.js"></script>
<script>
window.Webflow = window.Webflow || [];
window.Webflow.push(function () {
// Skip on touch devices and when reduced-motion is requested
const isTouch = window.matchMedia('(hover: none), (pointer: coarse)').matches;
const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
if (isTouch || prefersReducedMotion) return;
const hasGSAP = window.gsap && window.ScrollTrigger;
const lenis = new Lenis({
// Built-in features (Lenis 1.3.x)
autoRaf: !hasGSAP, // self-driven RAF when GSAP isn't present
autoToggle: true, // auto enable/disable based on environment
anchors: true, // smooth scroll for #anchor links
allowNestedScroll: true, // respect nested scrollable areas (modals, dropdowns)
stopInertiaOnNavigate: true, // stop inertia on internal link clicks
// Feel
lerp: 0.1,
wheelMultiplier: 1,
touchMultiplier: 1,
infinite: false
});
window.lenis = lenis;
// GSAP + ScrollTrigger integration (drives RAF via GSAP ticker)
if (hasGSAP) {
lenis.on('scroll', ScrollTrigger.update);
gsap.ticker.add(function (time) {
lenis.raf(time * 1000);
});
gsap.ticker.lagSmoothing(0);
}
// Webflow IX2 scroll interactions support
lenis.on('scroll', function () {
window.dispatchEvent(new Event('scroll'));
});
});
</script>