Implement search bar query cycling animation
Closed this issue · 1 comments
In the search bar on the home page we currently have a simple "What do you want to learn?" prompt. We could enhance this a bit by cycling through and displaying possible search queries after the prompt. For example, some possible queries could be React
, HTML
, or Javascript
. It may be worth looking into CSS animations a bit in order to implement this.
Here's an example of what I mean: https://codepen.io/pmallol/pen/xxwXxqy
Update for documentations sake: It looks like CSS animations may not be the way to go, so instead we're looking into anime.js.
Here's an stack overflow article that (hopefully) accomplishes what we're looking for: https://stackoverflow.com/questions/63300355/how-to-create-text-animation-with-typewritter-effects-using-anime-js
There's another library being used in an answer here called "typed.js". May be worth looking into that as well.
This issue is slightly different from originally planned - here's the new course of action
Since the default input placeholder only accepts pure text, a custom input element is needed
so
- make a custom input element
- add placeholder with typing animation
- make placeholder disappear when typing in input element
also have to ensure it works the same way as the existing input