deepuiux Posted May 1, 2021 Share Posted May 1, 2021 I just want to trigger the effect when scroll hit the screen for one time only Thank you for replying Link to comment Share on other sites More sharing options...
deepuiux Posted May 1, 2021 Share Posted May 1, 2021 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 Link to comment Share on other sites More sharing options...
GreenSock Posted May 1, 2021 Share Posted May 1, 2021 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? 2 Link to comment Share on other sites More sharing options...
Wizard of Oz Posted August 26, 2021 Share Posted August 26, 2021 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 Link to comment Share on other sites More sharing options...
akapowl Posted August 26, 2021 Share Posted August 26, 2021 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 2 1 Link to comment Share on other sites More sharing options...
Wizard of Oz Posted August 26, 2021 Share Posted August 26, 2021 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. 1 1 Link to comment Share on other sites More sharing options...
Wizard of Oz Posted September 3, 2021 Share Posted September 3, 2021 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 Link to comment Share on other sites More sharing options...
Cassie Posted September 3, 2021 Share Posted September 3, 2021 If you add some padding-top to split-parent or increase the line-height it should sort that out! 1 Link to comment Share on other sites More sharing options...
Wizard of Oz Posted September 3, 2021 Share Posted September 3, 2021 Awesome! thanks 1 Link to comment Share on other sites More sharing options...
mattpilott Posted November 2, 2023 Share Posted November 2, 2023 @ZachSaucier when using your technique how can i fix clipped descenders. I tried playing with padding and margin but it jumps around Link to comment Share on other sites More sharing options...
GreenSock Posted November 3, 2023 Share Posted November 3, 2023 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. Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now