My face with a Photoshop cutout filter applied to it

KATRINEMARIE.ME

Welcome. Click on an image below to read about the given project.

Back to homepage

Animation Index

14. April 2016

I couldn't keep track of my older animations, so I made this index page in order to find them more easily.

Originally, the animations used on this page was intended for an index page for my server, where I previously just had a full-page animation for lack of better ideas. But that site eventually grew into my CV website, and for that I didn't need the GSAP animations I had crafted. I felt it was a shame to let them go to waste, and since I simultaneously realized that I was starting to lose track of the older animations I'd coded before I made my CodePen profile, and which were still scattered in files on my server, I figured an animation index could serve a double purpose: Re-use of the GSAP code, and organizing my old animation demos.

Also, I made the background image myself in Illustrator with almost no pen toll fights.

A Note on the Animations

Most of these animations are nostalgic flashbacks - my first attempts at CSS animations. Nonetheless, as they are experiments and not meant to fit a particular specification, they are fun and quirky for the most part, and it was quite fun going through them again and remembering all the trial and error it took to create them back then.

I particularly remember the first time I attempted to use 3d transforms and accidentally changed the perspective to a value that made a cube scoot forwards and fill the entire viewport with flashes of colour every two seconds during an animation. My classmates were very impressed, thinking that the effect was intentional. But that was how I learned to apply perspective correctly... 

A few of these animations made it to CodePen in some (usually modified) form, but most didn't. 

The site shows a link to each animation as a(n animated SVG) hexagon with a title inside - click on it and you'll be taken to the appropriate page.

And as for the Index Site Itself

Yeah, that's been quite the ride. As stated, I intended to use the GSAP animations for an entirely different purpose, but after I didn't need them there, they were applied here instead. Slightly improved.

I had some fun with some techniques, and making the site responsive was accordingly diffitult (though instructive) - but I managed with no small amount of creativity. I did after all want to achieve these particular effects, and since this is a very personal project, I had my hands free to do whatever I liked. So consequently, there's no scrolling - look for anchor links instead (there's only one, with a large animated (SVG polyline) arrow, so it shouldn't be that hard to locate. Oh, and clicking it, besides easing you down to the next section of the page, also triggers the function that animates the hexagons in, so sit back and enjoy the show.

I had my fun with this site. I hope you will too. I'm sure you will if you don't take it too seriously - remember: These were early, for-fun, spur-of-the-moment demos after all.

Back to homepage