JoBurg Posted May 23, 2022 Share Posted May 23, 2022 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. Link to comment Share on other sites More sharing options...
Cassie Posted May 23, 2022 Share Posted May 23, 2022 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. Kapture 2022-05-23 at 09.44.11.mp4 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! 1 Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now