Jump to content
Search Community

Text Reveal Effect

swatip test
Moderator Tag

Recommended Posts

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:

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

 

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

 

We highly recommend using GSAP 3 formatting :) 

  • Like 9
Link to comment
Share on other sites

Hi, 

I  added text reveal animation to paragraph and heading but i am having issue with paragarph animation which has multiple lines.

After adding that animation to Paragraph it's cutting the text in between.

I checked spliting text into chars, words, lines but its still not working

Can anyone please help?

 

Thank you in advance

text-animation.jpg

Link to comment
Share on other sites

5 hours ago, mikel said:

Hey @ZachSaucier,

 

Is there a chance to revert the revert to play the animation again?

Not the same one, no. .revert() removes the effect of the SplitText so you need to recreate that and thus the animation again. I recommend putting it in a function to do so:

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

  • Like 1
Link to comment
Share on other sites

  • 5 months later...
On 3/27/2020 at 1:16 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 :) 

 

I was having similar issues trying to create this reveal effect by line. I found the old post referenced by Shrug and then found this solution written in GSAP 3 formatting... exactly what I was looking for, only the pen isn't working. At least when I try and run it. Has this been adjusted since creation?

Link to comment
Share on other sites

  • 4 months later...

Hello everybody!

I need a little help with something similar to @swatip. The word "Breathe" to appear and dissapear (translated down) and also be replaced by an array of other words 'Inhale', 'Exhale', 'Breathe' etc

I'm new to JS and GSAP so any kind of advice will help!

 

https://codepen.io/balaurul/pen/BaQoVmE#code-area

 

Thanks in advance!

 

Link to comment
Share on other sites

Welcome to the forums, @balaurul. It's typically best to just start your own thread, just for future reference. 

 

Unfortunately we just don't have the resources to provide free general consulting help but here are some pointers that might get you moving in the right direction:

  • Don't use pseudo elements - they can't be directly animated via JS. 
  • You could create all the words, each in their own <div>, all with a class applied like "word". Put them into a container <div> that's positioned wherever you want, with overflow: hidden. Set the ".word" <div> elements to position: absolute so they're all stacked on top of each other. gsap.set(".word", {yPercent: 110}) to push them off the bottom (outside the container) so they're invisible. Now you can just do a staggered animation that animates them to yPercent: 0 and then yPercent: -110. 
  • Give it a shot in CodePen and if you run into trouble with any GSAP-specific stuff, start a new thread here and we'd be happy to help. 

Good luck!

  • Like 5
Link to comment
Share on other sites

  • 2 months later...
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 

Link to comment
Share on other sites

2 hours ago, deepuiux said:

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

 

Welcome to the forums, @deepuiux. Can you please be a little more specific? Do you want to scrub it back and forth with the scrollbar position? Do you just want to trigger the effect when the scroll hits a certain point (and then never revert)? There are many, many options. I'd strongly recommend watching the video, reading the docs, and looking at the demos:

Link to comment
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...