[Batch ScrollTrigger + SplitText text reveal problem]

On 4/11/2021 at 11:44 AM, GreenSock said:

You were animating ALL of the lines each time even one <h2> entered the viewport. I assume you wanted something more like this?:

 

 

 

Thanks for being a Club GreenSock member! 🙌

 

 

 How can we add toggleAction In this ?

[Text Reveal Effect]

I just want to trigger the effect when scroll hit the screen for one time only 

 

This is the code for text reveal i just want to add scroll trigger effect in this 

 

const childSplit = new SplitText("h1", {

  type: "lines",

  linesClass: "split-child"

});

const parentSplit = new SplitText("h1", {

  // type: "lines",

  linesClass: "split-parent"

});

 

gsap.from(childSplit.lines, {

  duration: 1.5,

  yPercent: 100,

  ease: "power4",

  stagger: 0.1

});

 

 

 

 

 

Thank you for replying 

[Text Reveal Effect]

I just want to trigger the effect when scroll hit the screen for one time only 

 

Thank you for replying 

[Text Reveal Effect]

On 3/27/2020 at 6:46 PM, ZachSaucier said:

Hey swatip.

 

The trick to this is to actually split the text into lines twice so that you have have a container for each line that is able to hide the text:

 

 

 

Notice that I added a couple of classes and CSS to make the effect.

 

We highly recommend using GSAP 3 formatting  

Hello Sir
I am new to GSAP Can you please tell me how can i do this animation with scrolltrigger 

 

Thank you so much in advance