Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Danielovitch

Want to highlight text with ScrollTrigger in Elementor/Wordpress

Recommended Posts

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

Link to comment
Share on other sites

Hi Danielovitch,

 

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

  • Like 1
Link to comment
Share on other sites

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

 

 

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×