Responsive behavior using SplitText

[Pedro Rezende]

Hello everyone! 🌟

 

I'm trying to understand how to handle SplitText responsiveness because I'm encountering some unexpected results when I resize the page.

 

In the example below, I notice that I get a different position each time I refresh the page with a different screen resolution. I'm attempting to revert the changes before reapplying SplitText.

 

Ex: After resizing to a big screen:

 

Ex2: After refreshing the page using the same screen resolution above: 

For the effect I want to use, I really need the position property set as absolute. Also, I'm not throttling, just for simplicity. 

 

Someone could please give me a light on what I'm doing wrong / not understanding correctly?

 

Thank you very much!

 

See the Pen OJrOEXB by prznd (@prznd) on CodePen

[Rodrigo]

Hi Pedro,

 

It seems that the revert method is not cleaning the height and width given to the SplitText target h1. This seems to resolve the issue:

if (text) {
  text.revert();
  gsap.set("h1", { clearProps: true, }); // Remove all inline styles applied by GSAP
}

Hopefully this helps.
Happy Tweening!

[GreenSock]

Thanks for pointing that out - it'll be fixed in the next release. @Rodrigo's solution is good in the meantime. 👍

[Pedro Rezende]

Thank you for the quick fix, @Rodrigo! 

Looking forward for the next update,  @GreenSock o/