search

WinterCore / react-text-transition

Animate your text changes
MIT License
601 stars 26 forks source link

wont update width on visibility change #25

Closed pinuts-LucasKristandt closed 2 years ago

pinuts-LucasKristandt commented 3 years ago

When TextTransition is not visible on load and will be visible due to window resize it does not update its width and therefore stays invisible -> width: 0px;

Bildschirmfoto 2021-02-26 um 14 00 38
WinterCore commented 3 years ago

Hello there.

When TextTransition is not visible on load and will be visible due to window resize

What do you mean exactly by that? Is the TextTransition outside the viewport of the screen? and you have something like a parent with overflow hidden?

It would be great if you could reproduce it in a CodeSandBox example. cuz I have very little info to work with here.

Thanks.

jvincent3 commented 3 years ago

I'm not sure if I have the same issue as him but my text-transition width is at auto, so basically it's just occupying the whole width of the parent box. Example: https://codesandbox.io/s/trusting-sun-35wmx?file=/src/App.js

The S on the code example is just staying at the bottom, if I use display: flex it fixes it a bit but it doesn't have that smooth slide effect.

WinterCore commented 3 years ago

Hey @jvincent3

I think you want the width to be animated if I understood you correctly. For that, you just have to pass the inline flag.

<TextTransition
    text={TEXTS[index % TEXTS.length]}
    springConfig={presets.wobbly}
    inline
/>