3 ms·
You mean something like this? https://youtu.be/KsKpQLcvNGA?t=828 https://youtu.be/KsKpQLcvNGA?t=828 ("Magic Move by Character" or "Anagram" https://discussions.
by armchairhacker 4y ago
You mean something like this? https://youtu.be/KsKpQLcvNGA?t=828 https://youtu.be/KsKpQLcvNGA?t=828 ("Magic Move by Character" or "Anagram" https://discussions.apple.com/thread/2030384 https://discussions.apple.com/thread/2030384)
I know there are a variety of potential ways to get the position of each character in the DOM using https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect https://developer.mozilla.org/en-US/docs/Web/API/Element/get... and https://developer.mozilla.org/en-US/docs/Web/API/Range/getBoundingClientRect https://developer.mozilla.org/en-US/docs/Web/API/Range/getBo...: e.g. you can make it so that each character is in its own element or draw an invisible "marker" up to the specified character. From there, you can hide the old text, replace the word with absolutely-positioned characters, animate them either with JavaScript or CSS into the new text (which will also be an invisible "marker"), and also fade in/out characters which don't transition like in Keynote Anagram. Idk of any existing resource
- poeticsilence 4y agoExactly like this. Thanks for the pointers, and the smooth example video!