lukePeavey / SplitType

Javascript utility that splits text into lines, words, characters for animation
https://lukepeavey.github.io/SplitType/
545 stars 39 forks source link

Add index CSS variables to lines, words and chars #58

Open flayks opened 1 year ago

flayks commented 1 year ago

Regarding our discussion @lukePeavey, I gave it a go and implemented this feature as it seemed to be fairly simple for me to try 😄

It works pretty well imo but let me know if things need changes! I also added a setting (true by default, can be put back to false, up to you) to control this behavior

image

flayks commented 1 year ago

I just saw that it would cause issues for the indexes when text includes other markup children such as strong or em, like this example: https://lukepeavey.github.io/SplitType/?path=/story/tests-nested-elements--split-lines-words-and-chars

image

This would require more logic and work but I'm afraid this is beyond my skills 🙈

lukePeavey commented 1 year ago

Thanks I'll take a look at this over the weekend.

flayks commented 1 month ago

@lukePeavey it's been a while since I started this PR, have you had a chance to look at this feature?