Gsap Layered Text On Scroll | Elementor WordPress
GSAP Layered Text on Scroll” is a dynamic feature for Elementor in WordPress, using GSAP to animate layered text as users scroll. This adds a modern, engaging visual effect to your website, enhancing user experience and interactivity.
Gsap Layered Text On Scroll
HTML
<div id="wrapper" class="wrapper">
<div id="topText" class="text-lorem">RC WEBKIT</div>
<div class="text-lorem">RC WEBKIT</div>
<div class="text-lorem">RC WEBKIT</div>
<div class="text-lorem">RC WEBKIT</div>
<div class="text-lorem">RC WEBKIT</div>
<div class="text-lorem">RC WEBKIT</div>
</div>
Javascript
<script src="https://unpkg.com/gsap@3.9.0/dist/gsap.min.js"></script>
<script src="https://unpkg.com/gsap@3.9.0/dist/ScrollTrigger.min.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function () {
const topText = document.getElementById('topText');
const texts = document.querySelectorAll('.text-lorem');
// Set the initial opacity of the top text
gsap.set(topText, { opacity: 1 });
texts.forEach((text, index) => {
gsap.to(text, {
y: () => index * 20, // Adjust the vertical scroll speed (positive value moves the text upward)
x: () => index * 15, // Adjust the horizontal scroll speed
opacity: index === 0 ? 1 : 0.4 - (index / (texts.length * 5)), // Top text is fully opaque, others have higher opacity
scrollTrigger: {
trigger: text,
start: 'top 70%', // Adjust as needed
end: 'bottom 50%', // Adjust as needed
scrub: true, // Smooth scrubbing effect
markers: false // Set to true for debugging
}
});
});
});
</script>
CSS
.wrapper {
position: relative;
height: 40vh;
}
.text-lorem {
position: absolute;
top: 30%; /* Center the text vertically */
transform: translateY(-50%);
opacity: 0;
white-space: nowrap; /* Prevent text from breaking into multiple lines */
}