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 ...
a dropdown menu - respectively a html <select> element
... 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:
Step: Dropdown opens autonomously steered and controlled with help of gsap. NOT by a real user interaction using the cursor and computer mouse.
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.
