Highlight Text On Scroll With Gsap - Elementor WordPress Tutorial Flex Container
Learn how to add a touch of interactivity to your Elementor WordPress website with this tutorial on highlighting text on scroll using GSAP. Utilize flex containers and unleash the power of animation to captivate your audience effortlessly.
Highlight Text On Scroll With Gsap
HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.1/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.1/ScrollTrigger.min.js"></script>
<script>
gsap.registerPlugin(ScrollTrigger);
const textElements = gsap.utils.toArray('.elementor-heading-title');
textElements.forEach(text => {
gsap.to(text, {
backgroundSize: '100%',
ease: 'none',
scrollTrigger: {
trigger: text,
start: 'center 80%',
end: 'center 20%',
scrub: true,
},
});
});
</script>
CSS
selector .elementor-heading-title {
color: rgb(182, 182, 182, 0.2);
background: linear-gradient(to right, #b6b6b6, #b6b6b6) no-repeat;
-webkit-background-clip: text;
background-clip: text;
background-size: 0%;
transition: background-size cubic-bezier(.1,.5,.5,1) 0.5s;
position: relative;
}