Text Reveal Effect

[deepuiux]

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

 

Thank you for replying 

[deepuiux]

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 

[GreenSock]

You could do something like this: 

See the Pen vYgqpdQ?editors=0010 by GreenSock (@GreenSock) on CodePen.

 

Or if you want to animate each word instead, you could do this: 

See the Pen jOyjYer?editors=0010 by GreenSock (@GreenSock) on CodePen.

 

Does that help? 

[Wizard of Oz]

Hi, I am trying  to recreate this using the the toArray utility method. Any idea why mine does not work?

 

Thanks in advance for the feedback

 

See the Pen JjJddVR by martinkariuki7-the-looper (@martinkariuki7-the-looper) on CodePen.

[akapowl]

Hey @Wizard of Oz

 

yours does work, you just forgot to include the neccessary CSS for your split-parent  

 

.split-parent {
  overflow: hidden;
}

 

See the Pen b6a0e66b31642599ef65c83adb2982ef by akapowl (@akapowl) on CodePen.

 

[Wizard of Oz]

Thank you so much for the quick answer @akapowl You are a superhero indeed  Although I have to say It's not really "my code." I just took what Zach wrote earlier and tried using that in a loop. So all credit should go to you superheroes.

 

Have a good day ahead.

 

[Wizard of Oz]

Hi, I noticed a weird thing. When I use the letter "Å" which is a Norwegian character, it get's chopped off a bit. Is there a way to avoid this happening?

 

See the Pen JjJddVR by martinkariuki7-the-looper (@martinkariuki7-the-looper) on CodePen.

[Cassie]

If you add some padding-top to split-parent or increase the line-height it should sort that out!

[Wizard of Oz]

Awesome! thanks

[mattpilott]

@ZachSaucier when using your technique how can i fix clipped descenders. I tried playing with padding and margin but it jumps around 

[GreenSock]

Hey @mattpilott. It's super tough to diagnose without seeing a minimal demo. Can you provide a CodePen or Stackblitz that illustrates the issue please? It seems like padding on the container that has overflow: hidden is what you'd need.