Table of Contents

Welcome to WP-Nordic documentation

Integrating Cookie Care with Lenis for Smooth Scrolling

Powered by the leading agency WP-Nordic

If your website has @studio-freight/lenis smooth scrolling installed and you encounter problems with our plugin, follow this guide.

Before we begin, these are the prerequisites

Step 1: Initialize Lenis Correctly

Ensure your Lenis initialization code is wrapped within either jQuery’s `document.ready` function or the native JavaScript `DOMContentLoaded` event. This ensures Lenis is initialized only after the DOM is fully loaded.

				
					(function ($) {
    let lenis;

    function activateLenis() {
        lenis = new Lenis({
            lerp: 0.07,
            smoothTouch: false,
        });

        lenis.on('scroll', ScrollTrigger.update);

        gsap.ticker.add((time) => {
            lenis.raf(time * 1000);
        });

        gsap.ticker.lagSmoothing(0);
    }

    $(document).ready(function () {
        if (window.innerWidth > 767) { // Adjust as needed for your desktop threshold
            activateLenis();
        }
    });
})(jQuery);
				
			

Step 2: Ensure correct script load order

Ensure that the theme’s JavaScript is loaded before the plugin’s JavaScript, it’s important to adjust the priority with which scripts are enqueued in WordPress. The plugin uses a priority of 99 to enqueue its scripts, you’ll want to enqueue the theme script with a lower priority number to make sure it loads first.

Step 3: Check for Cookie Care

After initializing Lenis, add a conditional check to determine if the Cookie Care plugin is active. This can be done by checking if window.CookieCare is not undefined and if the plugin is marked as active.

				
					if (typeof window.CookieCare != 'undefined' && window.CookieCare.isPluginActive) {
// Cookie care plugin is now active
}
				
			

Step 4: Listen for Custom Scroll Events

Inside the condition where Cookie Care is active, add an event listener for `CookieCareCustomScrollEvent`. This event is triggered whenever the cookie consent popup is opened or closed.

				
					window.addEventListener('CookieCareCustomOpenPopupEvent', () => {
    const html = document.querySelector('html');
    
    html.classList.contains('modal-open') ? lenis.stop() : lenis.start();
});
				
			

Example integration

Please note that this is an example. If this does not work for your website, please reach out, and we’re ready to help!

				
					(function ($){
  
  // Initialize Lenis outside of the slider initialization function
	let lenis;

	// Function to activate Lenis
	function activateLenis() {
		lenis = new Lenis({
			lerp: 0.07,
			smoothTouch: false,
		});

		lenis.on('scroll', ScrollTrigger.update);

		gsap.ticker.add((time) => {
			lenis.raf(time * 1000);
		});
		gsap.ticker.lagSmoothing(0);
	}

	$(document).ready(function () {
		// Check if the viewport width is greater than 767px (adjust as needed for your desktop threshold)
		if (window.innerWidth > 767) {
			activateLenis(); // Initialize Lenis initially

			if (typeof window.CookieCare != 'undefined' && window.CookieCare.isPluginActive) {
				window.addEventListener('CookieCareCustomOpenPopupEvent', function () {
					const html = document.querySelector('html');

					html.classList.contains('modal-open') ? lenis.stop() : lenis.start();
				});
			}
		}
	});
})(jQuery);
				
			
Table of Contents
Table of Contents

Discover more plugins from WP-Nordic

Behind WP Nordic lies a team passionate about WordPress and its vast possibilities.

Quality First Approach

Our plugins, though selective, stand out. Every product is meticulously crafted, ensuring only top-notch offerings for your website

Optimized for Speed

We recognize the array of plugins on your website. Our focus? Creating plugins that are both lightweight and quick, boosting your site's performance.

Always Available Support

Need assistance? Our support team is always ready to help on working days, making us a reliable partner for all your needs