SHARE
Horizontal scrolling effects can transform a standard webpage into an engaging, storytelling experience. Whether you’re creating timelines, portfolios, or panoramic views, this technique adds a professional touch to your website. This guide will walk you through implementing a horizontal scroll effect using Elementor, with both free and pro versions supported.
The horizontal scroll effect relies on a specific container structure:
– A main scroll container
– A scroll content container
– Individual panel sections
– Vertical containers for top and bottom
This hierarchical setup ensures smooth transitions and proper animation behavior.
The primary scroll container requires specific settings for optimal performance:
– Full width (100%)
– Minimum height of 100vh
– Zero gaps
– Hidden overflow
– Custom CSS class: “scroll container”
– Transition and overscroll behavior modifications through CSS
The scroll content container serves as the wrapper for your horizontal panels:
– Full width setting
– Auto height configuration
– 100vh height
– Zero margins and padding
– Custom CSS class: “scroll content”
– Direction toggle between row horizontal (for animation) and column vertical (for editing)
Each horizontal panel requires careful configuration:
– 100% width
– 100vh height
– Zero gaps and margins
– Custom flex-shrink setting of zero
– Individual styling options for visual distinction
The animation relies on GSAP (GreenSock Animation Platform) with ScrollTrigger:
– HTML widget placement at the bottom of scroll content
– Timeline configuration with customizable scrub options
– Marker settings for development purposes
– Start and end points for animation timing
– X-value movements for smooth transitions
The setup allows for various adjustments:
– Marker visibility toggle for development/production
– Delay settings for smoother corner transitions
Several important factors ensure proper functionality:
– Exact setting implementation is crucial
– Container direction must be set correctly for editing and viewing
– CSS code placement varies between Elementor Free and Pro
– Additional animations can be incorporated within the scroll trigger
To maintain optimal performance:
– Follow container settings precisely
– Toggle between horizontal and vertical views when needed
– Ensure proper HTML widget placement
– Disable markers before publishing
Conclusion
This horizontal scroll implementation offers a powerful way to enhance website interactivity. While it requires attention to detail during setup, the result is a professional, smooth-scrolling experience that can significantly improve user engagement. Whether using Elementor Free or Pro, this technique provides a premium feature without the need for additional plugins.
The versatility of this implementation makes it suitable for various applications, from storytelling to product showcases, while maintaining compatibility with both Elementor versions ensures accessibility for all users.
Place the HTML Widget as the last item in your Scroll Container and add this code there or in the Elementor Custom Code
<script src="https://cdn.jsdelivr.net/npm/gsap@3.12.5/dist/gsap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/gsap@3.12.5/dist/ScrollTrigger.min.js"></script>
<script>
gsap.registerPlugin(ScrollTrigger);
let container = document.querySelector(".scroll-content");
let scrollContainer = document.querySelector(".scroll-container");
// Timeline for horizontal scrolling and parallax effects
let scrollTimeline = gsap.timeline({
scrollTrigger: {
trigger: scrollContainer, // The element that will trigger the scroll animation
pin: true, // Pins the element, making it fixed while scrolling
scrub: 1, // Syncs the animation with the scroll position
start: "top top", // Animation starts when the top of scrollContainer meets the top of the viewport
end: () => "+=" + container.scrollWidth, // Sets the end point based on the width of the scroll-content
markers: false, // Optional, adds markers to visualize the start and end points for debugging
invalidateOnRefresh: true // Refreshes the end position on window resize for responsive adjustments
}
});
// Add a small delay at the start (pause with no movement)
scrollTimeline.to(container, { x: 0, duration: 0.1 });
// Add Horizontal Scroll to Timeline
scrollTimeline.to(container, {
x: () => -(container.scrollWidth - window.innerWidth) + "px",
ease: "none"
});
// Add a small delay at the end
scrollTimeline.to(container, { x: () => -(container.scrollWidth - window.innerWidth) + "px", duration: 0.1 });
</script>
.scroll-container{
transition: none;
overscroll-behavior: none;
display:flex !important;
width:100% !important;
Height: 100vh !important;
overflow: hidden !important;
margin: 0px !important;
padding: 0px !important;
}
.scroll-content{
transition: none;
overscroll-behavior: none;
display:flex !important;
width: auto !important;
height: 100vh !important;
flex-wrap: nowrap !important;
gap: 0 !important;
flex-direction: row !important;
margin: 0 !important;
padding: 0 !important;
}
.panel {
display: flex !important;
width: 100vw !important;
height: 100vh !important;
flex-grow: 1 !important;
flex-shrink: 0 !important;
flex-basis: auto;
box-sizing: border-box !important;
}
Follow exactly the same steps for the setup instead of adding the CSS Codes from Above. The CSS Code will be in the following code in the Styles included. You can also add the CSS Code to your wordpress Custom CSS and add the GSAP Code in the HTML Widget.
Or just copy all the code below and this into the HTML widget.
<style>
.scroll-container{
transition: none;
overscroll-behavior: none;
display:flex !important;
width:100% !important;
Height: 100vh !important;
overflow: hidden !important;
margin: 0px !important;
padding: 0px !important;
}
.scroll-content{
transition: none;
overscroll-behavior: none;
display:flex !important;
width: auto !important;
height: 100vh !important;
flex-wrap: nowrap !important;
gap: 0 !important;
flex-direction: row !important;
margin: 0 !important;
padding: 0 !important;
}
.panel {
display: flex !important;
width: 100vw !important;
height: 100vh !important;
flex-grow: 1 !important;
flex-shrink: 0 !important;
flex-basis: auto;
box-sizing: border-box !important;
}
</style>
<script src="https://cdn.jsdelivr.net/npm/gsap@3.12.5/dist/gsap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/gsap@3.12.5/dist/ScrollTrigger.min.js"></script>
<script>
gsap.registerPlugin(ScrollTrigger);
let container = document.querySelector(".scroll-content");
let scrollContainer = document.querySelector(".scroll-container");
// Timeline for horizontal scrolling and parallax effects
let scrollTimeline = gsap.timeline({
scrollTrigger: {
trigger: scrollContainer, // The element that will trigger the scroll animation
pin: true, // Pins the element, making it fixed while scrolling
scrub: 1, // Syncs the animation with the scroll position
start: "top top", // Animation starts when the top of scrollContainer meets the top of the viewport
end: () => "+=" + container.scrollWidth, // Sets the end point based on the width of the scroll-content
markers: true, // Optional, adds markers to visualize the start and end points for debugging
invalidateOnRefresh: true // Refreshes the end position on window resize for responsive adjustments
}
});
// Add a small delay at the start (pause with no movement)
scrollTimeline.to(container, { x: 0, duration: 0.1 });
// Hinzufügen des horizontalen Scrollens zur Timeline
scrollTimeline.to(container, {
x: () => -(container.scrollWidth - window.innerWidth) + "px",
ease: "none"
});
// Add a small delay at the end
scrollTimeline.to(container, { x: () => -(container.scrollWidth - window.innerWidth) + "px", duration: 0.1 });
</script>