Embarking on a personal project is always exciting, and for this project I was eager to show off my chops and create a slick, modern webpage. Naturally ‘animations’ came to mind. I discovered a fantastic image gallery concept and decided to use it.
The code is right there, it shouldn't be too hard right?
- Excitable me
Converting the animation example started off well:
jQuerycode into a standalone
CSStransform to make it big, then animated it via
CSS. It was buttery smooth, and I was pleased.
What I failed to account for was future enhancements. Naturally I wanted some image gallery nav controls shortly after. Some problems:
Whoops, I did the conversion wrong! The original concept used a floating ‘image preview’ element and animated that to specific images. Had I intended to have those features beforehand, I would have questioned my original algorithm. I was blindsided by the excitement of building something.
With some more work I got the animation working, but it took longer than expected.
Once the animation was complete, I wanted image navigation controls. Initially the actions were: next, previous, and close. Simple right? I created the UI, wrote the code, hooked it all up to the animation component. Easy enough.
Then I wanted a seamless transition when the thumbnail switched to the full image. Next I wanted swipe between photos on mobile. Of course I need to let users zoom into the image too. Later I wanted an image gallery slider so users could navigate the album easier.
My ideal image viewer became more and more complicated. There are so many lightweight, feature rich components out there that I should have used one of them. Again I could have saved a lot of time, but this is how you learn.
I wanted a classic masonry grid to showcase my albums and images. The popular library Masonry was of course my first choice.
The problem started when trying to retrofit the library into my
React app. Duck tape solutions exist to combine the two libraries, but I’ve never been able to get it working quite perfectly. The following issues in my Masonry implementation still exist:
Whilst the library initially looked promising, it’s been frustrating trying to fix the interoperability issues. In future, I might implement a more react specific solution.
Reactspecific libraries instead of the most popular one.
jQuery, I should have questioned its interoperability with
Reactand researched some problems that might have arisen.