[Want to highlight text with ScrollTrigger in Elementor/Wordpress]

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

 

 

[Want to highlight text with ScrollTrigger in Elementor/Wordpress]

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

[Newbie question: ID (unique) to class (multiple usage)]

Okay, I was on the right way  

// banner
    let all_purgatory = gsap.utils.toArray( '.the-purgatory' );
		
	all_purgatory.forEach( ( the_purgatory ) => {
			
    let blow_up = gsap.to( the_purgatory, {
      
      duration: 0.5, 
      scaleX: 4, 
      scaleY: 4, 
      opacity: 0,
      ease: 'expo.inOut', 
      paused: true, 
      
    } );
    
    gsap.to( the_purgatory, {

      scrollTrigger: {

      	trigger: the_purgatory, 
        scrub: false, 
        start: () => 'top top', 
        end: () => the_purgatory.offsetHeight/2 + ' top', 
        onEnter: () => blow_up.restart().pause(), 
    	  onLeave: () => blow_up.play(), 
        onEnterBack: () => blow_up.reverse(), 
        onLeaveBack: () => blow_up.restart().pause(), 
        pin: true, 
				// markers: true
        
      }
    
    } );
			
});			

 

[Newbie question: ID (unique) to class (multiple usage)]

Hello all together, 

 

first: I am a newbie in javacript and GSAP, but I found a piece of code that I want to use in my websites for a cool animation. 

This is the code: 

// banner
    let the_purgatory = document.getElementById( 'the-purgatory' );
			
    let blow_up = gsap.to( the_purgatory, {
      
      duration: 0.5, 
      scaleX: 4, 
      scaleY: 4, 
      opacity: 0,
      ease: 'expo.inOut', 
      paused: true, 
      
    } );
    
    gsap.to( the_purgatory, {

      scrollTrigger: {

      	trigger: the_purgatory, 
        scrub: false, 
        start: () => 'top top', 
        end: () => the_purgatory.offsetHeight/2 + ' top', 
        onEnter: () => blow_up.restart().pause(), 
    	  onLeave: () => blow_up.play(), 
        onEnterBack: () => blow_up.reverse(), 
        onLeaveBack: () => blow_up.restart().pause(), 
        pin: true, 
				// markers: true
        
      }
    
    } );			

My aim is to use this code for multiple banners, but right now it's ID driven. I first changed the id to a class name at the banners. 

Then I investigate this code above. I changed "document.getelementbyID" to "document.getelementbyClass" and tried to add a foreach. 

the_purgatory.forEach( ( the_purgatory ) => {

I thought: Okay, I need the connection to the class, not the ID. Check by switching ID to class. And I need the script to be used every time the class comes up. So I added the foreach. 

That were my thoughts, but to repeat it, I am a newbie. Can someone explain me what need to happen, if I want to use this code on multiple banners via class?

Thanks in advance
Daniel