Want to highlight text with ScrollTrigger in Elementor/Wordpress

[Danielovitch]

Hello, 

 

I am starting out with GSAP right now and after some steps forward here is a challenge I'm thinking pretty hard about. I am working mainly with elementor and custom code. ScrollTrigger works, there are other things I have on my site on scroll.  This means: 

gsap.registerPlugin(ScrollTrigger);

is in place. 

 

I want to highlight my text at specific points while scrolling. Inspiration was this wonderful thing here: 

 

But I am not able yet to transfer and apply this. 

 

That's what I've done: 

//get all the classes "text-highlight"
let highlight = gsap.utils.toArray( '.text-highlight' );
		
//forEach
	highlight.forEach(( highlight ) => {

//To this on scroll
		scrollTrigger: {
 		 	trigger: highlight,
   			start: '-100px center',
    			onEnter: () => highlight.classList.add('active')
						}		
		}); 
});

 

I see that I do not mark something in the code above, but I do not know how to put it. The problem is that if I apply this right here from the demo: 

<mark class='text-highlight'></mark>

to my Elementor text parts (I want to have the markup for ) the mark is already in place, because Elementor takes it as the mark. So it works from the start, but I want it to be smooth like in the demo while scrolling. 

 

Do I need to make it inactive from the start? And if yes, how?

Thanks in advance and sorry if details are missing. 

 

DV

 

 

 

See the Pen gOPMwvd by hexagoncircle (@hexagoncircle) on CodePen

[OSUblake]

Hi Danielovitch,

 

Your demo seems to be working fine, so I'm not sure what your question is. 

[Danielovitch]

Hello @OSUblake, thank you for your answer. 

The demo in codepen is not mine, it's the inspiration I took. I see, the codepen link was seperated from my text. 

It's this demo you mean, didn't you? 

Greetings
DV

 

 

[OSUblake]

Can't you use the same CSS and apply it to elementor? I'm not familiar elementor, so it's really hard to say how to go about implementing that. Maybe someone else that has experience with it will chime in.