[Simulate usage of real html <select> and <input> element with react]

Hello, 

I am new to gsap and try my best to explain what I am aiming for. I already searched the web but was not able to find a solution or code example.

 

I want to simulate the usage of a really existing html element within the website and being part of the body, in this specific case ...

1. a dropdown menu - respectively a html <select> element
2. ... and a html <input> field

Let me clarify 1: I have a dropdown as per example below.

<form >
  <label for="fruits">Choose a fruit:</label>
  <select name="fruits" id="fruits">
    <option value="banana">Banana</option>
    <option value="mango">Mango</option>
    <option value="apple">Apple</option>
    <option value="kiwi">Kiwi</option>
  </select>
</form>

Now, after the website finished loading, with React useEffect I like to start the animation smoothly which means:

1. Step: Dropdown opens autonomously steered and controlled with help of gsap. NOT by a real user interaction using the cursor and computer mouse.
2. Step: Mango will be hovered and then selected autonomously steered and controlled with help of gsap. 

For all these happenings/steps/animation the real cursor shall not be used. Instead a created/designed and animated SVG cursor will be used.

But the main focus of my question and challenge is lying on the animation of the html element - the dropdown menu: opening, hovering to mango and selecting it. No need to create or provide a solution to create and animate a cursor.

 

Same with the input field. The field shall be selected and focused, a typing effect enters an example text and then the focus disappears.

 

I did not find anything on that. Is this even possible? I have no clue. 

 

I hope somebody can help me.