Delaney Brummond

I started with making the vinyl cases. I went into Photoshop and did a sketch, which I may improve upon. But I wanted to have a concept for what I was looking at. I decided to look into “tweening”, the in between animation technique used when moving from one moment to the next. I thought this might provide a good way of transitioning from the case on the side to the case from the front, and potentially even the information folding forward. I am still working on figuring out how to use the TweenJs library.

I am still working through the logistics of actually using the library. But I am sure I will be able to figure it out.

The flow of my website, ideally, would be a vinyl spinning in the beginning from the top, that is loading the page. The vinyl spins and goes away by getting smaller. Then the page shows the two cases. If clicked, the case rotates into the front view and you can flip through the information as if it was vinyl.

To make this happen, I will use the TweenJs Library. I would love to use TurnJs as well, or very worst case I will use http://bchanx.com/slidr.

Psuedocode:

HTML –
Import library in script tag
Have images on page with links

CSS –
Ideally have it respond to mobile
Look good, and consistent theme and colors

Javascript –
Have tween animation acting on both the vinyl cases/shelves
Have the loading vinyl animation work properly and start when the screen is loaded

My Minimum Viable Product (MVP) is to not have the vinyl loading screen, and just have one library used, and just have some information about each topic within the site of vinyl. The MVP will still be functional, just not as extreme as I was hoping for. I would probably end up using this one http://bchanx.com/slidr

My functional prototype is below. https://creative.colorado.edu/~debr2500/fwd/project1.html