Jump to content
GreenSock

fastraxpos

<br> Tag inside <p> Breaks Line Functionality

Go to solution Solved by GreenSock,

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Hello,
 
We recently began implementing GreenSock libraries into our design application, which involves the use of content editable blocks which make up text layers. Our system is built to work with Medium Editor, and works well for any modification, etc we need to make.
 
Now we began implementing animation into our layer system, which will give us entrance and exit effects. I've set up all the tweens and custom animations to the layers, slideIn, rotateIn, zoomIn, bounceIn, etc, using TimelineMax which works amazingly. However when we move to split text, I found a few issues which I ran into, specifically with split text and lines.
 
I've attached an example code pen with the issue, using one of the examples from your repository for SplitText.

 

Your Link:

See the Pen gFHza by GreenSock (@GreenSock) on CodePen

 

My Link:
 
The issue is when a <br> tag is included after typing and creating new lines, the format is as shown below:

<div id="quote">
    <p>Text with break tag issue<br></p>
    <p>Even With New Lines</p>
</div>

This is throwing an exception DOMException: Node was not found in line 246 of SplitText.js.

 

The code on this line is: "element.removeChild(node)"

 

When commenting, this works as expected, and the node in console reports a <br> tag as expected.

 

Is there any way to prevent this from occurring? I could try some workarounds for this format, but you mention compatibility with most every type of structure (excluding spans, etc). I figured this may be a bug you could fix for other users as well.

 

Let me know.

 

Thanks,

Justin

See the Pen BpLbjv by jbevan2007 (@jbevan2007) on CodePen

Link to comment
Share on other sites

Hi fastraxpos,

 

Welcome to the forums and Club GreenSock.

 

Thanks so much for the demo. It clearly shows an issue that we will need to investigate further.

Sorry for the hassle. We will look into it and report back.

 

Carl

  • Like 1
Link to comment
Share on other sites

Sorry about that. It should be resolved in the upcoming release which you can preview on codepen using this URL: https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/SplitText.min.js

 

Better? 

 

Once you confirm things are working well for you, I'll update the official zip files so you can snag the "real" one that works outside of Codepen. 

  • Like 3
Link to comment
Share on other sites

The SplitText url Jack gave you is the same one you are using (just with updated source).

External files commonly get cached so I forked your pen and added a cache-buster variable at the end of the url to the SplitText file to force the new version to load.

Test here: http://codepen.io/GreenSock/pen/xgRwqd

  • Like 4
Link to comment
Share on other sites

Hello,

 

This seems to work fine in the CodePen instance, so I think it will be fine when implementing in my libraries.

 

Let me know when this has been updated in the source so that I can grab it and update my local file.

 

Thank you for the fast response and great support!

 

Thanks,

Justin

Link to comment
Share on other sites

  • Solution

The updated version is officially launched. Feel free to snag it anytime now from your account dashboard or any of the "Download GSAP" buttons on the site (as long as you're logged in). Happy tweening!

  • Like 1
Link to comment
Share on other sites

This definitely works the same and properly on my end, using the latest version.

 

Thanks for the help, it is greatly appreciated!!!

  • Like 1
Link to comment
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×