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

[JoBurg]

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.

 

[Cassie]

Heya, welcome to the forums - 

Sounds like you're likely overcomplicating things here by thinking about what elements to use. This is a visual effect. You don't need an actual dropdown. You just need to style some divs (or an SVG) to look like a dropdown.

 

In fact - I would 100% not use a real HTML element because (I assume) this is a decorative animation. You don't want to actually be moving a users focus state and selecting elements. That would be horrendous for accessibility and useability. 

e.g. I recently made the header animation for this site.

https://new.eslint.org

 

The 'dropdown' is just an image. The 'quickfix' button that gets pressed isn't actually a button.
   

 

Same as this animation - it's not a form element and the elements aren't getting 'focus' - it's just animating styles on divs.

In terms of where to start, this is a good bet! You'll need to make a timeline. If you have any questions pop back here. Excited to see the outcome of this, it sounds really interesting!