Instructions

A quick guide to customize and manage your website effortlessly.

Lenis smooth scrolling

This template uses Lenis Smooth Scroll to create fluid scrolling and a more refined browsing experience.

<script src="https://cdn.jsdelivr.net/npm/@studio-freight/lenis@1.0.42/dist/lenis.min.js"></script>

<script>
window.Webflow = window.Webflow || [];
window.Webflow.push(function () {

  if (window.matchMedia('(hover: none)').matches) return;

  var lenis = new Lenis({
    duration: 1.2,
    easing: function (t) {
      return 1 - Math.pow(1 - t, 4);
    },
    smoothTouch: false,
    normalizeWheel: false,
    lerp: 0.1
  });

  // RAF loop
  function tick(time) {
    lenis.raf(time);
    requestAnimationFrame(tick);
  }

  requestAnimationFrame(tick);

  // Recalculate Lenis after page load
  window.addEventListener('load', function () {
    lenis.resize();
  });

  // Recalculate after images load
  document.querySelectorAll('img').forEach(function (img) {
    if (!img.complete) {
      img.addEventListener('load', function () {
        lenis.resize();
      });
    }
  });

  // Recalculate on resize
  window.addEventListener('resize', function () {
    lenis.resize();
  });

});
</script>

Filtraio uses Lenis Smooth Scrolling to create a smoother scrolling experience on desktop devices. The effect is initialized through custom JavaScript and can be adjusted using the settings below.

01. Scroll duration

duration: 1.2,

Controls how long the scrolling animation takes to complete.

Faster: 0.8
Default: 1.2
Slower: 1.6

02. Scroll easing

easing: function (t) {
  return 1 - Math.pow(1 - t, 4);
},

Controls how scrolling accelerates and decelerates. You can replace this function with another easing formula to change the scrolling feel.

03. Scroll smoothness

lerp: 0.1

Controls the interpolation and smoothness of the scrolling movement.

More responsive: 0.15
Default: 0.1
Smoother: 0.05

04. Touch scrolling

smoothTouch: false,

Keeps native touch scrolling on devices without hover support. Change this setting to true if you want Lenis to handle touch scrolling as well.

05. Wheel normalization

normalizeWheel: false,

Controls whether mouse wheel input is normalized. Enable it by setting the value to true if you want more consistent wheel behavior.

06. Disable smooth scrolling

To turn off Lenis, remove or comment out the Lenis initialization script and its associated JavaScript from your site's custom code. Also remove the external Lenis CDN script if it is no longer needed.

Webflow GSAP animations

Filtraio uses Webflow's native GSAP integration to create smooth, engaging animations throughout the template. These animations are managed directly within Webflow Designer, making them easy to customize without editing custom code.

Customizing animations

To adjust an animation:

Select the animated element in Webflow Designer.
Open the Interactions panel.
Locate the associated GSAP animation or interaction.
Adjust available settings such as duration, delay, easing, and trigger options to match your preferences.

Disabling animations

To disable an animation, select the corresponding element, open the Interactions panel, and remove or disable its associated animation.

Note: Before removing or renaming animated elements, review their associated interactions to avoid unexpected animation behavior.