Jump to content


Incorporating this text fade into the timeline

Go to solution Solved by PointC,

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 currently use a somewhat clunky method to achieve the following effect:



Which is running a separate TweenMax (at the bottom) with a 1.5s delay concurrently at the same time as the timeline to get the text to fade while the SplitText is also running.


This works and I'm happy with it, but I can't help but think there's a more correct way of doing this by including the instruction in the timeline instead of a bolted-on TweenMax?


I couldn't quite figure out timeline delays and such. 

See the Pen AXJYOJ by AnimaChambers (@AnimaChambers) on CodePen

Link to comment
Share on other sites

  • Solution

Hi AnimaChambers  :)


You are correct. You can add that tween to the timeline and use the position parameter to change its start time. In your case, it looks like you want the fade-out tween to start 1.5 seconds after the SplitText animation begins so you'd write it like this:

tl.to("#quote", 2, {autoAlpha:0, y:0, ease:Power1.easeIn}, 1.5);

To learn more, I'd recommend taking a look at Carl's blog post about the position parameter:




Happy tweening.


  • Like 2
Link to comment
Share on other sites

Thanks! That's great - is something simple I missed. Will come in handy for other animations.

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