SplitText plugin can't divide paragraphs

[Zhiyi Zeng]

I'm trying SplitText plugin in official examples provided in Codepen. However, I don't know how to divide paragraphs. I mean, let's say there are paragraph One and paragraph Two, divided by <p></p> , if using SplitText plugin, <p> tag will not exist any more and paragraph one && two become one paragraph. How to keep two paragraphs divided while using SplitText?

 

Here is a simple demo to illustrate more:

```html
# before using SplitText
<div class="container">
  <p class="paragraph1">
    Hello, Gsap!
  </p>
  <p class="paragraph2">
    Hello, SplitText!
  </p>
</div>

# after using SplitText
<div class="container">
	<span>Hello</span>
	<span>Gsap</span>
	<span>Hello</span>
	<span>SplitText</span>
</div>

# What I want to get
<div class="container">
	<p class="paragraph1">
      <span>Hello</span>
      <span>Gsap</span>
	</p>	
	<p class="paragraph2">
      <span>Hello</span>
      <span>SplitText</span>
	</p>
</div>

```

 

[mikel]

Hey @Zhiyi Zeng,

 

Does this pen help you?
 

See the Pen zgBaqB by mikeK (@mikeK) on CodePen

 

Happy tweening ...

Mikel

 

[Zhiyi Zeng]

3 minutes ago, mikel said:

Hey @Zhiyi Zeng,

 

Does this pen help you?
 

 

 

 

Happy tweening ...

Mikel

Yes, it helps a lot! Thanks.  It's an elegant way to do so.

 

But, I'm wondering if there is any way for SplitText to keep paragraphs what they are. I have dozens of, but uncertain numbers of paragraphs in every passage, with some css files included. Such a solution would still wipe out all css styles. 

 

Best regards,

Zhiyi

 

 

[mikel]

Hi @Zhiyi Zeng,

 

Take a look at this topic:  dynamic-amount-of-paragraphs

 

See the Pen oROPov by kvonspiczak (@kvonspiczak) on CodePen

 

Happy splitting ...

Mikel

 

 

[Zhiyi Zeng]

3 minutes ago, mikel said:

Hi @Zhiyi Zeng,

 

Take a look at this topic:  dynamic-amount-of-paragraphs

 

 

Happy splitting ...

Mikel

 

 

OK, thanks! But there is a little confusing. In CodePen, SplitText plugin won't wipe out css styles(like font color), but in my computer, it shows otherwise. Any ideas...?

 

Best regards,

Zhiyi

 

 

[mikel]

17 minutes ago, Zhiyi Zeng said:

SplitText plugin won't wipe out css styles(like font color), but in my computer, it shows otherwise.

 

What do you mean by that? Please give a CodePen example.

 

And: Please do not use the total quote to answer.
Either mark a position partially or use the button 'I'll Answer This' (bottom left).

 

Best regards

Mikel

 

 

[Zhiyi Zeng]

7 minutes ago, mikel said:

And: Please do not use the total quote to answer.
Either mark a position partially or use the button 'I'll Answer This' (bottom left).

OK, I won't do that anymore.

 

 

7 minutes ago, mikel said:

What do you mean by that? Please give a CodePen example.

In your first CodePen example, I changed 

<div class="quote quoteONE">SplitText makes it easy to break apart the text in an HTML element ... </div>

to 

<div class="quote quoteONE">SplitText makes <span style="color: red">it easy</span> to break apart the text in an HTML element ... </div>

"it easy" will be red. However, in my computer, the color won't change.

 

[mikel]

Hey @Zhiyi Zeng,

 

Well, what your computer does that may be questionable.
But GSAP SplitText runs properly ...

 

See the Pen PMzddE by mikeK (@mikeK) on CodePen

 

Best regards

Mikel

 

[Zhiyi Zeng]

...Maybe I should try other computers?

Thank you for your help?

 

Best wishes,

Zhiyi

[mikel]

Hey @Zhiyi Zeng,

 

It's a pleasure to help.

 

Here I have cleaned up the pen of @Matthias Weber '  -   a super helper !!!

 

See the Pen xvOJYQ by mikeK (@mikeK) on CodePen

 

Happy tweening ...

Mikel

[Zhiyi Zeng]

Sure, will do!

 

Best,

Zhiyi