Skip to content

daltonjmcgee/2021-4-20

Repository files navigation

2021-4-20

Technologies

  • Javascript
  • HTML/CSS
  • NodeJS
  • GSAP
  • Webpack
  • GIMP

Resources and details

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.

The Table

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).

Table with background intact

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.

Table with background removed

About

No description, website, or topics provided.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published