Expanding Card Text Sizing Problem
Hi,
I need to code a card layout consisting of 3 cards. When any card is clicked, it will expand in size. However, with my current implementation, the text within the card grows and shrinks during the animation. I know I should not animate the width, but I couldn't find any other solution. How can I achieve this? Thanks in advance for your help.
Here is my try: https://codepen.io/aydgn/pen/poBaJQj?editors=1100
2 Replies
Wrap the text and make it 100% of what the final result will. Make the overflow only happen on the outer wrapper of the text. This should slide it out from underneath the card then and do not wrap the text during animation.
Here is one possible option like I described before:
https://codepen.io/StfBauer/pen/MWRQEOY?editors=1100
You could also come up with animation to reveal the text like so
https://codepen.io/MannixMD/pen/RwOQQoj