ScrollTrigger, text hide, text reveal and position relative

[designdust]

Hey guys, I'm very new to GSAP. Although I can do some basic javascript, I'm having a hard time learning it. 

So I have attached my codepen.

 

and here's my code that having some issues for reference.

           <span class="text-highlight">Hello I'm Flitz<span class="text-highlight-bg"></span></span> 

 

1. I created an array of class "text-highlight". 

the problem is it only works at the first element. It's not working when the 2nd element with the same class appears on screen.

 

2. I have a css position:relative; in the same element so it only displays like inline block. It's working in my local server but not on codepen. When I run my code, the relative position is not appearing. It covers the entire row. 

 

Hope someone can help me, and pardon my english.

See the Pen GRZYzgN by designdust (@designdust) on CodePen

[akapowl]

 

Hey @designdust

 

The reason, why your version does not work, is not related to GSAP itself, or ScrollTrigger not working with position relative.

 

 

On 9/20/2020 at 2:02 PM, designdust said:

1. I created an array of class "text-highlight". 

 

You actually did not create an array. You use 

 

textHl = document.querySelector(".text-highlight");

 

where you'd actually have to use 

 

textHl = document.querySelectorAll(".text-highlight");

 

for getting ALL the elements of .text-highlight.

 

EDIT:

I am not sure if I am totally right/helping at all in this case with what I mentioned above - it is just, that your combination of document.querySelector and gsap.utils.toArray looked pretty wild to me. Sorry for any confusion.

 

But since you are already heading for the use of gsap.utils.toArray later on anyway, you could just stick to that in the first place for creating the array you need.

 

 

The problem you are having with the position relative on the headline, stems from this:

 

// Text Reveal
.text-highlight {
  position: relative;
  opacity: 0;
}

 

I think, you commenting out your comment like this, breaks the CSS right after it in codepen.

I changed it to this

 

/*Text Reveal*/
.text-highlight {
  position: relative;
  opacity: 0;
}

 

and it works as it should.

 

The thing now is, since the overlay you want to animate is inside your text-span, it will not be visible either, due to the opacity: 0.

You'd probably have to set things up a bit different.

 

 

 

To get to the result, you are probably after, this is what I did in the following pen:

 

I added an extra span (.text-hider-fg) inside your .text-highlight

 

<span class="text-highlight">
  <span class="text-hider-fg"></span>
    Hello I'm Flitz
  <span class="text-highlight-bg"></span>             
</span> 

 

that basically has the same CSS as your .text-highlight-bg, but its z-index and background-color set, so it covers up the text itself so it is not visible initially - this sort of replaces/mimics your setting to opacity: 0.

 

In your timeline I then first scaleX the text-highlight-bg to 1, then set the text-hider-fg to autoAlpha: 0 and in the last step, scaleX the text-highlight-bg to 0 again. 

 

With all changes made, your JS now looks like this

 

      window.onload = function(){
        
        gsap.registerPlugin(ScrollTrigger);                 
        
        var textHl = gsap.utils.toArray('.hero-title');        
        
        textHl.forEach(el => {
                  
        var textHider = el.querySelector('.text-hider-fg');  
        var textBg = el.querySelector(".text-highlight-bg");
                           
        var tl = gsap.timeline({
          scrollTrigger: {
            trigger: el,
            start: "top bottom",
            markers: true,
          }
        });
        
        tl        
        .to(textBg, 1, { ease: "expo.out", scaleX:1 })
        .set(textHider, { autoAlpha: 0 })
        .to(textBg, 1, { ease: "expo.out", scaleX:0 })
        });


      }

 

 

 

And here is a working demo:

 

See the Pen d00b8bfb5a92618610da77d89cc3561a by akapowl (@akapowl) on CodePen

 

 

 

One last thing:

Note, that I set the height of your .row to calc(100vh + 10px) - just for demonstration purposes.

And I also removed the height: 100% from your .hero-title - otherwise the link below your text would have been pushed waaay down.

 

 

 

Hope this helps.

Oh, and welcome to the forums by the way  

Cheers

Paul

 

 

[designdust]

Wow. Thanks for the fast and detailed response, this community is so alive!

 

You make it seem so easy. I probably will spend a couple of days to figure it out. haha. I think I need to further enhance my coding skills first. I forgot that  I'm using scss in vscode and pasted it directly to codepen, thus the // comment. I'm really noob.

 

Thanks for the solution and for welcoming me. This is really helpful! Glad I asked here. I'll be retaining the Codepen so that anyone who will stumble across this can see it.