Jump to content
Search Community

Update Split Text when user resizes browser

kimipt test
Moderator Tag

Go to solution Solved by PointC,

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

Hi everyone,

 

Im having a problem where the SplitText plugin is working as smoothly as I have hoped for. Problem is that when user resizes the browser the splits won't update causing the test to display weird line breaks, like these:

 

https://cl.ly/3Y3G3c0B2P12

 

Is there any way to get around this, perhaps destroying the split after the animation is complete or rebuild the split perhaps?

 

Simply running the split again also doesn't work because it will take the initial split and just split on top of that.

 

Edit: While not my codepen, this also shows the same problem: 

 

Thank you!

See the Pen bedqvz?editors=1111 by RedGlove (@RedGlove) on CodePen

Link to comment
Share on other sites

  • Solution

Hi kimipt :)

 

Welcome to the GreenSock forum.

 

You're looking for the SplitText revert() method. From the docs:

  • .revert( );
    Reverts to the original content (the innerHTML before the split).

https://greensock.com/docs/#/HTML5/GSAP/Utils/SplitText/revert/

 

We also just had an extensive discussion about the same topic here:

 

https://greensock.com/forums/topic/16210-split-text-and-browser-resize/

 

Hopefully that helps.

 

Happy tweening.

:)

  • Like 4
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.
×
×
  • Create New...