Jump to content
Search Community

Splittext with stagger over lines?

mattdown test
Moderator Tag

Recommended Posts

Hi all,

I've got this codepen which I'm trying to tweak a little to achieve the effect I'm after.

As it currently stands, each letter in each line fades in and then the next line starts once the previous line has finished.

I need to change this slightly so that the 2nd, 3rd, 4th lines etc. don't have to wait for the previous line to finish first but also have a slight stagger / delay of about 1 or 2 seconds so that the final effect will be a diagonal sweep of the block as a whole instead of the slightly robotic / typewriter effect as it currently is.

This attached image kinda illustrates the effect I'm trying to achieve.

I'm struggling to work out what changes would be need to the loop and the tween in order to create this?

Any help or suggestions would be really appreciated.

Thanks in advance
Matt

Screenshot 2021-05-15 at 10.16.38.png

See the Pen XWMKWEX by mattdown2478910 (@mattdown2478910) on CodePen

Link to comment
Share on other sites

2 hours ago, Cassie said:

I'd probably look at using an angled gradient mask for this....


Thanks for the suggestion of using a mask instead. I've been experimenting and have come up with this so far which is much nearer the effect I'm trying to achieve.

The timelime seems to be running twice though and misses out the second paragraph on the first iteration.

Can anyone point out the error in my loop / code here please?

See the Pen mdWEebm by mattdown2478910 (@mattdown2478910) on CodePen


 

Link to comment
Share on other sites

22 minutes ago, mattdown said:

I just need to work out why it's running twice now it seems 😕

 

It's not. You have a loop that is selecting every line in the document.

 

$(".text-block p").each(function(p, i){
  
  var p = $(this);
  var mySplitText = new SplitText(p, {type: "lines",linesClass: "line"});
  var chars = mySplitText.chars;
  var lines = mySplitText.lines; 
  
  introTxt_TL.fromTo('.line', // !!! this will animate every `.line`
     {}, {});  
});

 

Maybe this?

introTxt_TL.fromTo(lines, 
     {}, {}); 

 

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