Implementation of the Dropbox brand landing page using React, motion and tailwindcss.
My Work : https://dropbox.ofcljaved.com/ Original : https://brand.dropbox.com/
- Start by inspecting the DOM in browser and watching the animations/styles change.
- Chop down the animations to very small module by deleting the elements and focus on one animtation at a time.
- Going through motion docs and using youtube videos to learn motions.
- First, I managed to found the initial loading animations which is happening by the class change
- Then I straight went to AI and it didn't help so back to docs
- The first animation took me more than a day or two and after that It went with flow
- Main thing is the useScroll hooks and useMotionEvent to create custom animations
- After that it was just inspecting and implementing the animations
- I got very decent grasp of motions
- Don't hesistate to use inline css, not everything needs to be in tailwind
- Don't know how good the code quality is, but did modularized repeating code until I exhaust