REFLECTIONS

01. who i am hates who i've been

memory

Anyone else miss AIM? Yes? Do you also miss how your little profile icon was a dumb gif of your favorite lyric from some angsty song?

parameters

For this exploration, I wanted to emulate the idea of "text art" that was very popular in the mid-2000s especially in AIM profiles. I worked in HTML/CSS to use hover animation and animation of the div widths.

reflection

There is something very interesting to me of only changing 1 element in HTML to create compelling/interesting animations. I think that there is a lot to uncover about what exactly can be changed with hover states and CSS animations. There's almost too much to uncover.

What other things can I animate? How does animating different elements change the visuals that are being shown?

Experiment A: The hover idea (rotating ==='s) also made me think about how to create letter forms by overlapping "non-readable" into "readable" letterforms. (Weird "O"s)

Experiment B: I love CSS animations. Probably what helped me with really enjoying HTML/CSS coding. Animating the div width works well with moving the characters to push and animate without any other animations.

experiment A. html + css → Using a large number of transparently "="s to fill the screen, overlayed other position:absolute; divs on top with a hover trigger to rotate.
→ see for yourself

experiment B. html + css → Using a large number of transparently "="s to fill the screen, then hand-picked which "="s to add a < span > tag to in order to color and create a letter A and B. CSS animated the div width from 100% to 40% back to 100%.
→ see for yourself