Elementor, GSAP, Scrolltrigger
How to Create a Horizontal Scroll Section in Elementor Free + Pro
SHARE
1. Setup of your Page in Elementor
Use this setup and the code if you don’t plan to have additional movement Scroll Triggers inside the Horizontal Scroll.
Setup of the Horizontal Scroll Section
- Create a Scrollcontainer
- Flexbox, Full Width, Width 100%, Min Height 100vh
- Overflow: Hidden
- Margin 0, Padding 0
- CSS Classes: scroll-container
- Custom CSS for Elementor Pro –> Put this in your custom code or in the Advanced Tab in the Custom CSS
.scroll-container{
transition: none;
overscroll-behavior: none;
}- Create a Scroll Content Container
- Flexbox, Full Width, Width auto , Min Height 100vh
- Wrap: No Wrap, Gaps: 0, direction: Row Horizontal
- Margin 0, Padding 0
- CSS Classes: scroll-content
- Custom CSS for Elementor Pro –> Put this in your custom code or in the Advanced Tab in the Custom CSS
.scroll-content{
transition: none;
overscroll-behavior: none;
}- Create sections:
- Flexbox, Full Width, Width 100vw (or less if you want less or more is also possible) , Height 100vh
- Size: Custom, Flex Grow: 1, Flex Shrink: 0 (makes the Section exactly have the width defined
- CSS Classes: panel
- Styles are up to you, but for testing I recommend giving colors, so that you see the effects
- HTML Widget:
- Place the HTML Widget as the last item in your Scroll Container
<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>
2. Code for the Elementor Free Version
Make 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.
<style>
.scroll-container{
transition: none;
overscroll-behavior: none;
}
.scroll-content{
transition: none;
overscroll-behavior: none;
}
</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>
