Smooth scrolling is a great way to enhance the user experience on your website, providing a seamless feel when navigating through content. In this tutorial, we’ll show you how to implement smooth scrolling and combine it with GSAP animations using Elementor Pro’s custom code functionality.
Before you can use custom code within Elementor, make sure you have the Pro version installed. Elementor Pro unlocks the ability to add custom HTML, CSS, and JavaScript to your website.
Now, let’s add the necessary CSS for smooth scrolling. This CSS will adjust the page behavior and control scrolling interactions.
<style>
html.lenis {
height: auto;
}
.lenis.lenis-smooth {
scroll-behavior: auto !important;
}
.lenis.lenis-smooth [data-lenis-prevent] {
overscroll-behavior: contain;
}
.lenis.lenis-stopped {
overflow: hidden;
}
.lenis.lenis-scrolling iframe {
pointer-events: none;
}
</style>
GSAP (GreenSock Animation Platform) is a powerful tool for creating animations. Here, we will use it in combination with the Lenis smooth scrolling library to bring a fluid, animated scrolling experience to your site.
<script src="https://unpkg.com/@studio-freight/lenis@1.0.34/dist/lenis.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/ScrollTrigger.min.js"></script>
<script>
document.addEventListener("DOMContentLoaded", function() {
// Initialize Lenis
const lenis = new Lenis({
duration: 5.2, // Customize duration if needed
easing: (t) => Math.min(1, 1.001 - Math.pow(2, -10 * t)), // Easing function
smoothWheel: true, // Allow smooth scrolling with the mouse wheel
smoothTouch: false // Disable smooth scrolling for touch devices if desired
})
// Trigger Scroll Updates
lenis.on('scroll', (e) => {
console.log(e) // This logs the scroll event
ScrollTrigger.update() // Update ScrollTrigger animations
})
// GSAP integration with Lenis for smooth animations
gsap.ticker.add((time) => {
lenis.raf(time * 1000) // Custom requestAnimationFrame for smoother integration
})
// Disable lag smoothing to match Lenis behavior
gsap.ticker.lagSmoothing(0)
// Start the Lenis scroll loop
function raf(time) {
lenis.raf(time)
requestAnimationFrame(raf)
}
requestAnimationFrame(raf)
})
</script>
You can modify the gsap.to() function to customize how different elements behave when the user scrolls. Use different properties like x, y, opacity, or scale to achieve unique effects.
TO NOT MISS ANY OF MY UPCOMING PROJECTS, MAKE SURE TO FOLLOW ME ON SOCIAL MEDIA !
THANKS FOR VISITING MY SITE !
This function has been disabled for Jeh Creates.