Jump to content
Search Community

SplitText - Stagger the animation on between lines

lukestoked test
Moderator Tag

Go to solution Solved by Rodrigo,

Recommended Posts

I'm wanting to add a text fadeIn & Up animation to each individual letter.

Currently it works fine for short sentences of text but over multiple paragraphs it begins to take too long to get to the end of the animation.


Is there a way to stagger the animation so that after lets say .3s the second line will begin running through and then after another .3s the third line will begin.

See the Pen vYvmjjv by luke-stoked (@luke-stoked) on CodePen

Link to comment
Share on other sites

Hi, There is a scrollTrigger attach for each quote so the animation starts at the trigger point. You can include markers and check. 


If you want these to animate at specific durations and in one after the other in a flow, then do not use scroll trigger and use position parameters. Here is a pen for the same without scrollTrigger.

See the Pen qBLmKNg?editors=1010 by tripti1410 (@tripti1410) on CodePen

Hope it helps!

  • Like 2
Link to comment
Share on other sites

I think a delay won't solve the problem since it can play when the user is not there yet, so maybe instead you create a timeline for each line and overlap them like  <40% 😶 But to be honest, maybe it's not the best idea to animate a big paragraph

Link to comment
Share on other sites

Hi @Toso

Yeah ideally I want it to run the second lines animation after maybe .3s so once the scrolltrigger was active, the paragraph of text mid way through the animation would look something like this.

Aliquam sollicitudin arcu a ipsum efficitur, at laoreet ante sodales. Vestibulum feugiat nisl eu done
Praesent vel enim et mauris dignissim elementum about half way
Pellentesque volutpat justo about a third
Just beginning

So it would kind of animate from the top left down to the bottom right. 


I've seen people use the translation of an image mask to have a similar effect. 

Link to comment
Share on other sites

Instead of just setting the stagger: value you can break it into an object and then use the amount: property, here you can specify how long the whole stagger should take, instead of each letter taking X amount, all the items only take up the amount you specify. You can also set an ease on the stagger, so the first letters will take longer and the later letters get bunched up together. Hope it helps and happy tweening! 


See the Pen poqPZjx?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen

  • Like 1
  • Thanks 1
Link to comment
Share on other sites

@mvaneijgen appreciate this, didn't know there was a way to set a maximum duration and then that will split the stagger between the amount of elements, very handy. 

@Toso think is more what I was looking for, starting the animation from the top left and going down towards the bottom right of a text. 

Unfortunately there seems to be a bug where the text towards the end of a line animates before it should, could it be to do with the grid: "auto" calculation from the first line of text and as it gets further through the text it starts to be offset due to different character count on line 2,3,4 etc 

Thanks for your input so far everyone :)

Link to comment
Share on other sites

  • Solution



If you want to start every line 0.3 seconds apart of each other, first create a SplitText for the paragraph using just lines and a main timeline. Then loop through those lines and create a new SplitText instance in order to split every line into characters. Then add an instance to the timeline for each line and use the position parameter to start each instance 0.3 seconds after the previous one.

const split = new SplitText("p", {
  type: "lines"

const tl = gsap.timeline({
  paused: true

split.lines.forEach((line, i) => {
  const lineSplit = new SplitText(line, { type: "chars" });
      y: 25,
      opacity: 0,
      stagger: 0.025
    i * 0.3


Here is a simple example:

See the Pen YzdVdKe by GreenSock (@GreenSock) on CodePen


Hopefully this helps.

Happy Tweening!

  • Like 1
  • Thanks 1
Link to comment
Share on other sites

@Rodrigo think you may have cracked it! thanks a bunch. 

I stumbled upon 

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

 this which I used to modify what I had already got together and also came up with this as another solution. Although may add a lot of unnecessary bloat compared to your solution.


See the Pen GRPmPEP by luke-stoked (@luke-stoked) on CodePen

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