I was commissioned by the Bisexual Resource Center to create a mini site for their “Am I Bi Enough?” domain. The scope was intentionally small – to create a simple landing page that says “yes!” and links to the main BRC website. The bisexual community is often plagued with feelings (and accusations) of not being “queer enough” so the site is intended to be straightforward and reassuring.

I’ve had some exposure to modern CSS techniques through my Firefly Art Grants work and wanted to hone those skills more. I guessed making a one-page site with pretty animation would be a great way to do that.

Design

The concept I developed would be simple but pleasing: the background would be an animated version of the bi flag, with shifting bands of bi-themed colors drifting up and down and overlapping with each other. After a short delay the pretty “yes!” text would appear in the center. After another short delay, the BRC logo would appear so users would have somewhere to click through to.

Arbitrary Technical Choice

I wanted to make the site with 100% html + css, no Javascript. With all of the new CSS animation, transform, and filter features, I hoped I’d have enough tools to get the effects I wanted.

The result is very close to how I imagined it. I’d been hoping to do a text write-on effect, but constructing the necessary SVG paths to make it work is very tedious. I found a javascript drop-in animation for plain font glyphs that looked nice and I was able to translate that to CSS.

Interesting Takeaways

Safari Glitches

The animation was working fine in Chrome and Firefox, but Safari had a lot of issues rendering my SVG images with 3d transforms. It seems to get confused about z ordering and will draw two objects half on top and underneath each other. I sprinkled as much z-index and transformZ as needed to get rid of those problems.

Mobile Firefox: Bad Text Shadow Render Performance

I had used a text-shadow with animation on the opacity of the shadow color to imitate a neon flickering effect. This worked fine on all platforms except Mobile Firefox, which became very jerky when this effect was turned on. I could have probably added a firefox-specific CSS rule to fix this, but the flickering didn’t add a whole lot to the experience so I removed it completely.

CSS is still CSS

I have a faily good mental model of how CSS works, but working with a web page as if it were a plain rectangular render buffer is still a challenge. Moving an object “off-screen” with perfect accuracy on any screen size is still not trivial.

IE is still IE

Imagine my surprise when I found the site doesn’t quite work right in Internet Explorer. In some of my animations I use the new CSS viewport units (vh, vw) to move the color bars offscreen. Mixing vh units with animation is simply broken on IE, so none of the moving color bars show up. The site still looks good enough and the letters drop in the right way, so we decided to leave it. The only real fix would be to use javascript to animate the bars, which I really don’t want to do. Most users are coming to the site on mobile anyway, and it works perfectly on Chrome, Safari, and Firefox.

Conclusion

The site looks great, was well-received, and clocks in at 72K. Users who went to biresource.org from amibienough.com bounced at a 6% lower rate than usual, which probably means that the site is bringing in new users. Social media reaction was positive with lots of heart emojis, so all in all it was a success. Not bad for a weekend of twiddling with CSS!