SplitText - Stagger the animation on between lines

[lukestoked]

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

[Trapti]

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!

[Toso]

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

[lukestoked]

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. 

[mvaneijgen]

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

[Toso]

yes i think I got you,  i created a simple one so you can test stagger before you scrolltrigger 

 

See the Pen jOXmKJz?editors=0010 by ahmed-attia (@ahmed-attia) on CodePen

 

 

also highly recommend those 

 

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

 

https://greensock.com/docs/v3/Staggers

 

 

 

[lukestoked]

@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

[Rodrigo]

Hi,

 

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" });
  tl.from(
    lineSplit.chars,
    {
      y: 25,
      opacity: 0,
      stagger: 0.025
    },
    i * 0.3
  );
});

tl.play();

Here is a simple example:

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

 

Hopefully this helps.

Happy Tweening!

[lukestoked]

@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