Take a look at this design layout https://www.figma.com/file/KCfJr16hkKdo1079mnA69X/Untitled?type=design&node-id=1%3A417&mode=dev&t=qPQMuLhJKDXxrdy4-1
Using this layout, you need to make a web application, where the application interface will be made in accordance with the layout above, where the following functionality will be available:
Ability to highlight any element on the left side of the application. Apply animation settings to an element in the right pane of the application. easing parameter - fill in the values for this parameter with your options to demonstrate knowledge on this topic. Preview button - leads to a demonstration of element animation. Please make the UI and UX of this interaction in accordance with your ideas about the most convenient and high-quality form for the user. Save the configuration of the animation parameters of elements on the page and open them when the user reloads the application.
Conditions for assessing the assignment:
Based on the results of familiarization with the task, please send a preliminary estimate of the time to complete each item and the date of completion of the task by replying to a letter with a link to this test task. You need to create a layout using the “pixel perfect” technique and integrate the layout into a web application written in React. Send a link to a working demo (an external link available to anyone without additional actions). Send a link to a git repository with source code. Report the total time to complete this task
- Solution to avoid hardcoding of elements
- Fix for blur option
- Fix for selection frame
- Fix for shadow frame with blur