Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
swatip

Text Reveal Effect

Recommended Posts

Hey @swatip,

 

You could use intersectionObserver for example.

Here is a nice tutorial.

 

Happy tweening ...

Mikel

  • Like 1
Link to comment
Share on other sites

Thank you but i want to create text animation like that example 

 

Link to comment
Share on other sites

 

Hey SWATIP,

 

Instead of the bars (in the tutorial) you could use text objects.
You can of course tween the animations with GSAP.
Try a test via codePen.

 

Happy tweening ...

Mikel

  • Like 1
Link to comment
Share on other sites

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 6
Link to comment
Share on other sites

As Zach stated you should be using GSAP 3 especially if you are new to using GreenSock. But if for whatever reason you are restricted to version 2 then here is an older post showing the same result.

  • Like 2
Link to comment
Share on other sites

Thank you.

Its been only 1 or 2 months I have started using GSAP . so i'm kinda new to GSAP

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

Hey @swatip,

 

Without watching your case live - in a CodePen - it is difficult to help you.

If the point is resize, check out this post.

Link to comment
Share on other sites

Hey @mikel

Yeah i am having the same issue with responsive. Its not wrapping automatically

Link to comment
Share on other sites

Hey @swatip,

 

And did you try

 

function allDone() {
  mySplitText.revert();
}

Hey @ZachSaucier,

 

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

 

See the Pen mdJgwbN by mikeK (@mikeK) on CodePen

 

Happy tweening ...

Mikel

 

Link to comment
Share on other sites

Hey @mikel,

I have tried but its still not wokring.

Link to comment
Share on other sites

Hey @swatip,

 

As I said: without watching your case live - in a CodePen - it is difficult to help you.

 

Kind regards

Mikel

Link to comment
Share on other sites

 

Hey @swatip,

 

Please look in the DevTools:  'ReferenceError: mySplitText is not defined'.

You need a correct reference.

 

Happy controlling ...

Mikel

  • Like 1
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

@david_br For some reason it doesn't like the type: "lines" in the second SplitText. You can leave it out and it works fine but we'll investigate the issue.

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 4
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.

×