[SplitText 'lines' removes <br> tags]

I was going for a 'slide in from below' effect on multiple paragraphs.

So this is what it would look like, and parts like the bolded areas should have line breaks, but since it strips out any line breaks, it just looks like one solid paragraph.

See the Pen MWOooNJ by aaronrobb (@aaronrobb) on CodePen

[SplitText 'lines' removes <br> tags]

No problem. See below.

 

See the Pen bGYWQGz by aaronrobb (@aaronrobb) on CodePen

 

[SplitText 'lines' removes <br> tags]

Is there a way around the splitText setup with "type: "lines"" to ensure it doesn't remove line breaks (<br>) when the content is wrapped in a <p>??

When using "words" or "chars" it keeps the breaks as they are, but when "lines" is selected, it removes those breaks and doesn't create new lines for them. It seems to use the outer <p> tags as what it sees as breaks, even if there is a <br> inside.

[Elements load before Gsap animations happen]

I'm using Gsap on a few elements on a local website I'm building.

While the animations do run well, the issue is that that the elements show up initially then trigger the animation, which is not what we want.

 

So for example, we have a page title that we're using SplitText with. When the page loads, it flashes the title for a few milliseconds, then runs the animation, which is a reveal-style, so it should not show at the start.

Same is happening for an image that should be hidden til scrolled to - you can see it flash on the page prior to animation.

 

My first thought is that gsap isn't loading fast enough - the page loads and then it triggers the animation.

Or perhaps because the main js file is deferring, its being delayed?

It is doing this locally and on my staging server.

 

Anyone have this issue before? Thoughts on fixing?