text-animation | : o : Create beautiful ASCII text animations | Command Line Interface library

You are not declaring the namespace for the converter in the xaml

Change

Here you go...

The idea you had was correct - trigger a re-rerender on each click even if the number is the same. The only thing you did wrong was assign the same key prop to your CSSTransition elelemnt on each render of an identical element.

The key needs to be unique because React uses the key prop to understand the component-to-DOM Element relation, which is then used for the reconciliation process. It is therefore very important that the key always remains unique, otherwise there is a good chance React will mix up the elements and mutate the incorrect one.

Anyway, you do need that second state variable to trigger a rerender. We will do something as basic as: const [trigger, triggerUpdate] = useState(false);. You can then tigger it like so: triggerUpdate(!trigger);

And the most important part, of course, is the key prop

The way to work around the lack of z-index support is to avoid having the planes intersect by displacing them on the z-axis.

since we are animating the transform property and we need that property for doing the z-axis displacement we can change the animation to the img element instead of the li element, and do the displacement on the li.

here's a working example: https://codepen.io/ptcc/pen/qBqyqEj?editors=0100

the changes are basically these:

move the perspective from the ul to each li

For it to be a perfect circle you would need to make the image a square. I see you are attempting to do that by setting width and height properties, but they aren't working. This is probably due to the object-fit: cover; property.

Try taking that out and it may fix it.

After talking with the guy who wrote this directive we decided I would write a new directive for angular 2+ and he should approve the pull request in the next couple of days. the new code should be available soon in his repository: https://github.com/g1eb/angular-text-animation

but for now, here is the new directive:

Here is a possible simple approach - the idea is just as simple as to change text alignment in container, anything else can be tuned as usual.

Demo prepared & tested with Xcode 12 / iOS 14

The hardest part of this typing animation is offset calculation for cursor which can be easily done by using combination of HTMLElement.offsetLeft and HTMLElement.offsetWidth for each letter of the word.

You have to get rid of absolute positioning on your img and you'll have to use media queries.

Starting from there, you'll see the flex-wrap: wrap working.

Here is a fork : https://codepen.io/hisato/pen/vYGLLNY?editors=0100

Also, if I may add, as a general advice avoid to transition margin/padding/top/left etc. You should always look for a way to transition the transform property, it will have the best performance.