For example, I was going to make an image carousel for my portfolio site. Wanting to avoid a simple plug-in so as to showcase my programming skills instead, I hunted around for tutorials to inspire me. What I learned was that the common carousel pattern is to load all of the carousel pictures but only make one visibile at a time. This allows for an animated transition between images.
This annoyed me because I wanted the fast loading time I had acheived through an even simpler method. I had put all of the project descriptors into objects, and each object into an array. I simply loop through the array on a click event to cycle through the screenshots of the projects - if the thumbnail ID matches the object’s ID field, just change the hero image
src attribute to the object’s image filepath. But then it seems that all of the great CSS3 animations I wanted to use require the elements to already be present in the page (duh) to be used.
Since the portfolio is supposed to be a showcase of my abilities, I certainly want to throw in some fun animation to make my site delightful and amazing to all who behold it. I might need to instead add in some other elements to show off instead.