Before we begin, these are the prerequisites
- Cookie Care plugin installed on your WordPress site.
- Lenis JavaScript library set up for smooth scrolling.
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);