How to adding class each line?

[reksaandhika]

I tried use code from documentation, it's not even wrapping line, instead just splitting words. Any idea how to adding class each line so i can animating per-line not per-word, thank you.

i want something like this anyway: https://somethinggood.no/

[gibbsy]

The lines plugin will add the --line-index css variable to each word, which you can use in your animation. For example: span.word { transition-delay: calc(var(--line-index) * 250ms + 250ms); }

[chigggsy]

Having trouble with splitting by lines as well. The documentation is a little confusing (pretty new to coding). Do I still add data-splitting="words" to my <p> tag?

[elebumm]

I wish this functionality existed. At the moment it just provides a CSS variable, which I can't animate using GSAP.

[chigggsy]

@elebumm I've heard you can use the GSAP SplitText plugin. However it is part of their Club Greensock membership.

[gibbsy]

Not tested this but to animate with gsap have you tried something like:

let myTl = gsap.timeline()
let delay = 0.3 //delay between lines in seconds
let dur = 0.3 //duration of animation
let words = Array.from(document.getElementsByClassName('word'));
words.forEach(word => {
let lineNum = getComputedStyle(word).getPropertyValue('--line-index');
myTl.to(word, dur, { y:"+=10px", ease: "Power2.EaseOut" }, lineNum*delay)
})