mattdown Posted May 15, 2021 Share Posted May 15, 2021 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 See the Pen XWMKWEX by mattdown2478910 (@mattdown2478910) on CodePen Link to comment Share on other sites More sharing options...
Cassie Posted May 15, 2021 Share Posted May 15, 2021 I'd probably look at using an angled gradient mask for this.... See the Pen bNVaRO by chriscoyier (@chriscoyier) on CodePen 1 Link to comment Share on other sites More sharing options...
mattdown Posted May 15, 2021 Author Share Posted May 15, 2021 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 More sharing options...
Cassie Posted May 15, 2021 Share Posted May 15, 2021 Nothing's happening in this codepen for me - Lil tip - You can animate mask position -Â https://developer.mozilla.org/en-US/docs/Web/CSS/mask-position 1 Link to comment Share on other sites More sharing options...
mattdown Posted May 15, 2021 Author Share Posted May 15, 2021 Ahhh, looks like it's only working in Firefox 😕 Link to comment Share on other sites More sharing options...
Cassie Posted May 15, 2021 Share Posted May 15, 2021 Yeah, you'll need the webkit prefix as well. I was imagining something like this? See the Pen eb1dc9b9fa9958f9c0ea2989a130fff9 by cassie-codes (@cassie-codes) on CodePen 3 Link to comment Share on other sites More sharing options...
mattdown Posted May 15, 2021 Author Share Posted May 15, 2021 Now working in Chrome as well. Seems like I needed a prefix to mask-image. I just need to work out why it's running twice now it seems 😕 See the Pen qBrNbJM by mattdown2478910 (@mattdown2478910) on CodePen  Link to comment Share on other sites More sharing options...
OSUblake Posted May 15, 2021 Share Posted May 15, 2021 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, {}, {});  2 Link to comment Share on other sites More sharing options...
mattdown Posted May 15, 2021 Author Share Posted May 15, 2021 Thanks OSUblake, that fixed the issue of it running twice Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now