Animations: applying shadows and motion

[Felicious]

Simply for making the UX more aesthetic :)

Describe the solution you'd like
I have several animations I want to implement; here is the list in order of priority

1. (easy) Shadow on submit button, on hover (shown in this video)

• This can be achieved easily with CSS; code of the example in video can be found in that link

2. Slide-y tab motion animated here

• According to Derrick, this one is difficult to achieve without JS and is a lot harder. He says: maybe possible with some css trickery but that would be hard with position translations

3. Execute button that turns into a loading bar while the back-end script is executing the function

4. Cascading Effect for the Drop-down window - VERY HARD

• Derrick: i would say cascade thing would be something you'd want to use a js library with more advanced control like anime js or framer motion. it's possible with css but depends on how you want to implement it and might be more hardcoded-y

[Felicious]

Derrick also mentions that "if you want to look at the website since it's really fun to look at and play around with, animation libraries have nice websites"

• https://www.framer.com/motion/
• https://animejs.com/
• even more complicated animations (more for illustrations) also: https://lottiefiles.com/

exported files for web use from other animation tools, it's what i did for my website! as a very basic version haha.

the dlee.dev animation i animated in adobe after effects and exported to an animated svg with lottie. which is like 1000x nicer for complicated animations since using actual animation software to do stuff is a lot better than manually trying to animate with code haha.

but lottie files are more of an illustration / image / gif replacement not really a UI thing