How do I resize split text and it's mask when the text use 'text-box-trim' property?

[Albar Abdul]

I want to animate the text by mask, but using the CSS text-box-trim prop for the text. When I see the animation preview, it looks like it doesn't work. I was expecting the text will pop out from the bottom of the text baseline (the trimmed textbox), but I found that the text is masked , but not by the trimmed textbox, so it animates from the normal textbox size. Here's the glimpse of my code and preview

 

Anyway, I'm still learning in using this animation platform, Thank you for the help

(I built a codepen preview, but please try to resize it at full size so the text displays in one line)

See the Pen azZeYbe by Albar-Abdul-Malik (@Albar-Abdul-Malik) on CodePen.

[GSAP Helper]

We'd love to help, but vague details like 'looks like it doesn't work' are very difficult for people to help with. Here are some tips that will increase your chances of getting a relevant answer:

• A clear description of the expected result - "I am expecting the purple div to spin 360degrees"
• A clear description of the issue -  "the purple div only spins 90deg"
• A list of steps for someone else to recreate the issue - "Open the demo on mobile in IOS safari and scroll down to the grey container" 

It's great that you provided a minimal demo, by the way.

 

Would you mind clarifying your question please? 

[Albar Abdul]

2 hours ago, GSAP Helper said:

We'd love to help, but vague details like 'looks like it doesn't work' are very difficult for people to help with. Here are some tips that will increase your chances of getting a relevant answer:

• A clear description of the expected result - "I am expecting the purple div to spin 360degrees"
• A clear description of the issue -  "the purple div only spins 90deg"
• A list of steps for someone else to recreate the issue - "Open the demo on mobile in IOS safari and scroll down to the grey container" 

It's great that you provided a minimal demo, by the way.

 

Would you mind clarifying your question please? 

Thank you for the note! I've improved the question to clarify my expectation. Hoping for answers!

[mvaneijgen]

Hi @Albar Abdul welcome to the forum!

 

I think your issue is that you've set text-box-trim to the h1, but not its children. Split text wraps all your spitting elements in its own elements, and is seems these elements do not inherit the text-box: trim-both cap alphabetic; so giving them the same css property seems to fix the issue. 

 

I've also update your GSAP code a bit, not that anything was inherently wrong, but this is how I would set it up. I've also placed some comments in your JS to explain certain properties, be sure to read through them.

 

Hope it helps and happy tweening! 

 

See the Pen YPWmjxZ?editors=0110 by mvaneijgen (@mvaneijgen) on CodePen.

[Albar Abdul]

Thank you so much for the help! I understand it now!