Scroll Smoother

The Scroll Smoother is an advanced feature that significantly enhances the scrolling experience on your website by harnessing the power of two renowned scroll smoothing providers: GSAP and Lenis. By utilizing either of these technologies, you can create fluid, smooth transitions that result in a more enjoyable and immersive user experience for your visitors.

How to use

To enable the Scroll Smoother, follow these easy steps:

  1. Navigate to the Extensions page on the Bricksforge settings.
  2. Locate the Scroll Smoother extension and activate it by toggling the switch.
  3. Once activated, click on the settings icon to access the Scroll Smoother options.
  4. Choose the provider you want to use and configure the options accordingly.
  5. Done. You can now enjoy smooth scrolling on your website.

For each provider you can choose between different options.

We recommend using the Lenis Scroll Smoother as it is lightweight and easy-to-use.

GSAP Scroll Smoother

The GSAP Scroll Smoother is a powerful and flexible solution that allows you to create smooth scrolling effects with the power of GSAP. It is a great option if you want to create custom animations and effects.

Note: It’s important to be aware that the GSAP Scroll Smoother alters the scroll context. Consequently, fixed positioned elements may not work as expected and must be moved outside the scroll container to ensure proper behavior. Please read the GSAP Scroll Smoother documentation for more information. Alternatively, you can use the Lenis Scroll Smoother for which you don’t need to worry about this.

Options

  • Smooth Value: The smooth value determines how much the scroll position is smoothed. The higher the value, the smoother the scrolling.

  • Speed: The speed value determines how fast the scroll position is smoothed. The higher the value, the faster the scrolling.

  • Touch Devices: Enable or disable the smooth scrolling on touch devices.

  • Allow Effects: By allowing effects, you can use data attributes to customize the scroll speed of specific elements, creating eye-catching parallax effects. For instance, you can add the attribute data-speed="2" to an element to adjust its scrolling speed. This allows for a more dynamic and engaging visual experience on your website.

  • Adjust all fixed elements automatically: By enabling this option, all fixed elements will be automatically moved outside the scroll container to ensure proper behavior. This is only necessary if you use the GSAP Scroll Smoother. Important: This could cause styling issues on your website. Please make sure to test your website thoroughly after enabling this option.

    Alternatively, you can use the attribute data-brf-fixed on fixed elements to move them outside the scroll container individually. This is the recommended approach.

Lenis Scroll Smoother

The Lenis Scroll Smoother is a lightweight and easy-to-use solution that allows you to create smooth scrolling effects with the power of Lenis. It is a great option if you want to create smooth scrolling effects without having to worry about the technical details.

Options

  • Duration: The duration value determines how long the scroll animation takes. The higher the value, the longer the animation.
  • Mouse Multiplier: The mouse multiplier value determines how much the scroll position is smoothed. The higher the value, the smoother the scrolling.
  • Touch Multiplier: The touch multiplier value determines how much the scroll position is smoothed. The higher the value, the smoother the scrolling.
  • Direction: The direction value determines the direction of the scroll animation. You can choose between vertical and horizontal.
  • Gesture Direction: The gesture direction value determines the direction of the scroll animation when using touch devices. You can choose between vertical and horizontal.
  • Easing: The easing function to use for the scroll animation, our default is custom but you can pick one from Easings.net.
  • Smooth: Enable or disable the smooth scrolling functionality
  • Smooth Touch: Enable or disable the smooth scrolling on touch devices.
  • Infinite: Enable or disable the infinite scrolling functionality. If checked, the scroll container will be duplicated and the user will be able to scroll infinitely in both directions.

Nested Scroll Elements

Use the data-lenis-prevent attribute on nested scroll elements, for example scrollable popups. In addition, we advise you to add overscroll-behavior: contain on this element. This will ensure that the scroll container will work as expected, even for nested scroll elements.