uclaacm/dev-pathways

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

  1. make a custom input element
  2. add placeholder with typing animation
  3. make placeholder disappear when typing in input element

also have to ensure it works the same way as the existing input