Jump to content


Fade out/Fade In text at the end of the slide

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts



I have this text slide  

See the Pen zhmAH by anon (@anon) on CodePen


I want to create a fadeIn/FadeOut effect on left and right margins when the slide occurs. The fade effect can be for any dimension just to have the first letters.


I was trying to use webkit-mask with opacity or gradient but the problem is that my background color on widget will have opacity to and with this method don't look nice.

So.. the only method is to have the effect on text but I don't know how to do that ( how to make the fade and how to find when the text letters are near the margins )




Link to comment
Share on other sites

That's possible, but it's non-trivial. You'd literally have to split apart all the letters (which our SplitText tool could do for you) and then build a script that adjusts opacity based on the position of each letter. Frankly, my advice would be to alter your design so that you can just put a PNG on each end over the top that fades from transparent to whatever your background color is. That'd look better and perform better and save you a lot of time. 

Link to comment
Share on other sites

Is the SplitText tool for JS too ?


What about this method:

I wrap every letter into a span class

All the time I will have a function that checks if every letter if is a correct position (can I check this ?)  . If is at that position I will the letter opacity (how can I make this with greensock ? a simple TweenLite with opacity property ?) 


The problem is that I have a interface where I can change the size of text, width of the container or separator distance. I will need to make some heavy calculations.


Thank you for your answer.

Link to comment
Share on other sites

Yes, we haven't officially announced it yet, but there's a SplitText tool for JS (it's a membership benefit for "Shockingly Green" and "Business Green" Club GreenSock members only). It'll do more than just wrap stuff in <span> tags (those actually don't allow certain types of property changes in certain browsers, like transforms, so we wrap in <div>s). In your case, if you just want to wrap in <span> tags, that should be relatively easy (no need for SplitText which also, by the way, allows you to position:absolute every letter/word/line if you want). 


And yes, that'd be some heavy calculations. That's why I think it'd be far better to alter your design and use two simple PNG files with transparency instead. 

Link to comment
Share on other sites

HI, why don't you just add some overlay with gradient from non-transparent, to transparent and back to non-transparent? 

See the Pen fKzCe by burnandbass (@burnandbass) on CodePen

  . You can even do it with CSS, but the browser support is not so good, so I personally prefer png image. 

Link to comment
Share on other sites

Because the background will change and it can be transparent also.

For example if my background will be red with opacity 0.5

How I will make the gradient ?

I was trying a gradient from red 0 to red 1 but will not show so nice on screen because of the transparent background.

Link to comment
Share on other sites


You could use the CSS Plugin to change the color using rgba parameters and use an onUpdate callback to pass each color of the gradient.


Unfortunately I'm on my phone so I can't set up a working sample, but I dI'd something like that for animating a 3D transform simulating the shadows on the far side of the element.


Later I'll try to post a sample.


Hope this helps



Link to comment
Share on other sites

When you have time can you please show me an example ? Because I don't know if it will work when I will have the background color with opacity and the gradient from fade In/ fade Out with opacity too. 


I think that the gradient opacity and the one from background will overlap and will create an undesirable effect.

Link to comment
Share on other sites

I don't think that'll work either - I highly recommend you alter your design so that you can do what bassta and I have recommended (using the PNG). Otherwise you'll need a lot of extra code and it'll degrade performance, all so you can have transparency in the background. Ultimately it's your decision, of course. 

Link to comment
Share on other sites



Sorry I couldn't post before.


Is not too much code though and is not a couple of lines either, you can see it working here:


See the Pen BzkKI by rhernando (@rhernando) on CodePen


Is not the complete work (you still need the right mask) but is the same process and can be added to the update callback too.


Also notice that I'm working with the text holder color instead that the body background, consider that if you use a gradient or image this could become quite a mess.


Hope this helps,



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