(This page includes affiliate links. If you click and purchase, I receive a small commission at no extra cost from you and that way you can support me. I only recommend tools that I have personally used and loved.)
Get Elementor Pro Today –
1 – Elementor Pro
Change Direction of Marquee based on Scroll up or Scroll down
With the below code, you can create a marquee with any element and simply change the direction based on scroll up or down. We use CSS, Javascript(JS) and mainly GSAP to achieve this.
Research
Design
Deploy
Success
Research
Design
Deploy
Success
Research
Design
Deploy
Success
Research
Design
Deploy
Success
- We add the script src code to run GSAP library on our page. This needs to be added only once in a page so make sure not to have copies of it and also make sure no other plugin/theme has added GSAP to your website.
- We add transition:none to our elements that are controlled by GSAP. This is needed in Elementor only as by default Elementor adds transition:all to all elements. As we are controlling our element with GSAP, we don’t use transition CSS property.
- The code for white-space:nowrap has been commented out as it may or may not be needed. Simply remove comments if you need it as in some cases it will help to keep the content in same line.
- .marquee-container is parent container that contains .marquee-inner two times. Please refer above video to match with your project.
- We also use overflow-x:clip to remove horizontal scrolling from overflowing of content. We use overflow-x:clip instead of overflow-x:hidden; as for some reason, it is not working in elementor.
- .animated-gradient is the class of container which parents .marquee-container.
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.4/gsap.min.js"></script>
<style>
.marquee-container, .marquee-inner {
transition: none !important;
}
/*.marquee-container {*/
/* white-space: nowrap;*/
/*}*/
</style>
<script>
let currentScroll = 0;
let isScrollingDown = true;
let tween = gsap.to(".marquee-inner", {xPercent: -100, repeat: -1, duration: 10, ease: "linear"}).totalProgress(0.5);
gsap.set(".marquee-inner", {xPercent: -50});
window.addEventListener("scroll", function(scroll){
if ( window.pageYOffset > currentScroll ) {
isScrollingDown = true;
} else {
isScrollingDown = false;
}
gsap.to(tween, {
timeScale: isScrollingDown ? 1 : -1
});
currentScroll = window.pageYOffset
});
</script>
<style>
.animated-gradient {
background: linear-gradient(90deg, rgba(177,108,234,1) 0%, rgba(228,99,149,1) 33%, rgba(254,118,95,1) 66%, rgba(255,167,76,1) 100%);
background-size: 200% 100%;
background-position: 0% 0%;
animation: marqueeGradientAnim 4s linear infinite;
overflow-x:clip;
}
@keyframes marqueeGradientAnim {
0% {
background-position: 0% 0%;
}
50% {
background-position: 100% 0%;
}
100% {
background-position: 0% 0%;
}
}
</style>
