Text Reveal Effect

[swatip]

Hi,

I am trying do text reveal animation on scroll like below website but its not working

 

https://bepatrickdavid.com/

 

can anyone please help me

Thanks in advance

[mikel]

Hey @swatip,

 

You could use intersectionObserver for example.

Here is a nice tutorial.

 

Happy tweening ...

Mikel

[swatip]

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

 

[mikel]

 

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

[swatip]

Yeah i'll try thank you

[swatip]

Hi,

 

I am trying to do following effect using GSAP

 

See the Pen KaGoyq by michielvandewalle (@michielvandewalle) on CodePen.

 

This is my codepen: 

See the Pen LYVMEag by swatiparge (@swatiparge) on CodePen.

 

I am working on this since moday 

can anyone help me please?
 

 

Thank you in advacne

[ZachSaucier]

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  

[swatip]

Thank you sooo much

[Shrug ¯\_(ツ)_/¯]

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.

[swatip]

Thank you.

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

[swatip]

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

[mikel]

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.

[swatip]

Hey @mikel

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

[mikel]

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

 

[swatip]

Hey @mikel,

I have tried but its still not wokring.

[mikel]

Hey @swatip,

 

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

 

Kind regards

Mikel

[swatip]

Hey @mikel,

 

Here is my work demo link:

 

https://whitenoise.design/TIF/

 

Please check 

[mikel]

 

Hey @swatip,

 

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

You need a correct reference.

 

Happy controlling ...

Mikel

[ZachSaucier]

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.

[david_br]

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?

[ZachSaucier]

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

[balaurul]

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!

 

[GreenSock]

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!

[deepuiux]

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 

[GreenSock]

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:

• https://greensock.com/docs/v3/Plugins/ScrollTrigger
• https://greensock.com/st-demos/