Instruction

GSAP Interactions

The Blukan template uses GSAP for smooth, high-performance animations. To animate an element, you simply need to add specific custom attributes to it inside Webflow.

Base Trigger (Scroll): By default, animation trigger when the elemnt scroll into the view. Use "data-animate" attribute
Load Trigger: If the animation name includes "Load", it will trigger immediately when the page loads. Use the "data-animate-load" attribute instead.
Stagger Animation: For stagger effects, add the attribute to the parent container. The animation will automatically apply to all of its direct children in sequence.

slide In from Bottom

Animation Style

Custom Attribute

Delay

Fade in

data-animate="fade-in"

0.2s

Fade in (0.4)

data-animate="fade-in (0.4)"

0.4s

Fade in (0.6)

data-animate="fade-in (0.6)"

0.6s

Fade in (0.8)

data-animate="fade-in (0.8)"

0.8s

Slide in From Bottom

data-animate="slide-in-from-bottom"

0.2s

Slide in From Bottom (0.4)

data-animate="slide-in-from-bottom-0.4"

0.4s

Slide in From Bottom (0.6)

data-animate="slide-in-from-bottom-0.6"

0.6s

Slide in From Bottom (0.8)

data-animate="slide-in-from-bottom-0.8"

0.8s

Slide in From Bottom Stagger

data-animate="slide-in-from-bottom-stagger"

0.2s

Slide in From Bottom Stagger (0.4)

data-animate="slide-in-from-bottom-stagger (0.4)"

0.4s

Slide in From Bottom Stagger (0.6)

data-animate="slide-in-from-bottom-stagger (0.6)"

0.6s

Slide in From Bottom Stagger (0.8)

data-animate="slide-in-from-bottom-stagger (0.8)"

0.8s

slide In from Bottom - load

Animation Style

Custom Attribute

Delay

Fade in - Load

data-animate-load="fade-in"

0.2s

Fade in - Load (0.4)

data-animate-load="fade-in (0.4)"

0.4s

Fade in - Load (0.6

data-animate-load="fade-in (0.6)"

0.6s

Fade in - Load (0.8)

data-animate-load="fade-in (0.8)"

0.8s

Slide in From Bottom - Load

data-animate-load="slide-in-from-bottom"

0.2s

Slide in From Bottom - Load (0.4)

data-animate-load="slide-in-from-bottom-0.4"

0.4s

Slide in From Bottom - Load (0.6)

data-animate-load="slide-in-from-bottom-0.6"

0.6s

Slide in From Bottom - Load (0.8)

data-animate-load="slide-in-from-bottom-0.8"

0.8s

Slide in From Bottom Stagger -Load

data-animate-load="slide-in-from-bottom-stagger"

0.2s

Slide in From Bottom Stagger Load (0.4)

data-animate-load="slide-in-from-bottom-stagger (0.4)"

0.4s

Slide in From Bottom Stagger - Load (0.6)

data-animate-load="slide-in-from-bottom-stagger (0.6)"

0.6s

Slide in From Bottom Stagger - Load (0.8)

data-animate-load="slide-in-from-bottom-stagger (0.8)"

0.8s

split heading

Animation Style

Custom Attribute

Delay

Split Heading

data-animate="split-heading"

0.2s

Split Heading (0.4)

data-animate="split-heading-0.4"

0.4s

Split Heading (0.6)

data-animate="split-heading-0.6"

0.6s

Split Heading (0.8)

data-animate="split-heading-0.8"

0.8s

split heading - load

Animation Style

Custom Attribute

Delay

Split Heading - Load

data-animate-load="split-heading"

0.2s

Split Heading - Load (0.4)

data-animate-load="split-heading-0.4"

0.4s

Split Heading - Load (0.6)

data-animate-load="split-heading-0.6"

0.6s

Split Heading -Load (0.8)

data-animate-load="split-heading-0.8"

0.8s

scale in from bottom

Animation Style

Custom Attribute

Delay

Scale in From Bottom

gsap-animate="scale-in-from-bottom"

0.8s

Scale in From Bottom - Load

gsap-animate-load="scale-in-from-bottom"

0.8s

Smooth scroll

Blukan smooth scrolling is powered by Lenis and explicitly designed to work within Webflow's ecosystem while maintaining tight synchronization with GSAP Scroll Trigger.

The architecture prioritizes calculation accuracy over immediate initialization. Because GSAP and Lenis rely on exact DOM heights to trigger animations, the script execution is deferred until the entire page—including heavy assets like images and custom fonts—has fully loaded. The behavior is also strictly limited to desktop environments, as native touch scrolling is universally better for user experience on mobile devices.

Add code at the end of the <head> tag

<link rel="stylesheet" href="https://unpkg.com/lenis@1.3.26/dist/lenis.css">

Add code at the end of the <body> tag

<script src="https://unpkg.com/lenis@1.1.13/dist/lenis.min.js"></script>
<script>
  const lenis = new Lenis({
    duration: 1.2,
    easing: (t) => Math.min(1, 1.001 - Math.pow(2, -10 * t)),
    smoothWheel: true,
  });

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

Editing Navbar Links

Dugdeq's smooth scrolling is powered by Lenis and explicitly designed to work within Webflow's ecosystem while maintaining tight synchronization with GSAP Scroll Trigger.

To edit the links double-click the Navbar component to open it on the canvas. In the Navigator panel, expand the layers down to the "Nav Link List". Inside, you can select any "Nav Link" to change its text, update its destination URL, or duplicate an existing link to add a new item to your menu.

Here is the implementation:

Navbar  (component)
└─ Inner Container
   └─ Navbar Inner Container
      ├─ Column. Nav Logo Wrap
      │─ Column. Navbar Navigation
      │ └─ H Flex. Nav Link List    ← edit, add, or remove links here
      │           ├─ Nav Link
      │           ├─ Nav Link
      │           ├─ Nav Link
      │           └─ Nav Link
      └─ Column. Nav CTA Wrap

Instructions

GSAP Interactions

slide In from Bottom

slide In from Bottom - load

split heading

split heading - load

scale in from bottom

Smooth scroll

Add code at the end of the <head> tag

Add code at the end of the <body> tag

Editing Navbar Links

Here is the implementation:

Automate Everything, Ship Faster.