- Javascript
- HTML/CSS
- NodeJS
- GSAP
- Webpack
- GIMP
I wanted to get some practice with Animations in this project. Not so much web design (hence why it looks like a slide). I used GSAP's timeline feature to animate object movement, expansion and clip path animation. I used GIMP to remove the background of the image (taken on an iPhone) in order to get the effect.
There is a plan in this to expand this to an actual website later with animation based on scroll as well as incorporating ThreeJS and 3D models into the background.
This is an actual table I built in my woodshop.
Here is the initial image (which is actually lower quality due to dragging and dropping out of Photos instead of exporting. The original image is something like 22MB).
This is the image with the background removed. Again, because this was about animating practice, the background removal isn't as on par as it would be in an actual production site.