Slidedown transition with scaleY

Here’s another “non-height” approach to slide down transitions: use scaleY (I haven’t checked this for browser support yet, I think IE9 at least will need a prefix for transform-origin).

Neat, I kinda like this one too. The overshoot on the slide down (where it goes a bit further and bounces back) is a touch of exaggeration, easily achieved with cubic-bezier timing. That sounds confusing! But it isn’t all that hard! Use Lea Verou’s amazing preview tool. Here’s the curve I came up with: http://cubic-bezier.com/#.2,.38,.72,1.3

So this approach is still different to animating the height. The jquery slidedown adjusts the box height, revealing more content. The scaleY property squeezes the content which may look weird. Again, a little fade in while sliding may help. Also, scale is more attuned to squash and stretch so, you know, that’s something to play with!

Advertisement

The new life of Ben!

Today I took a leap of faith (no, I’m not playing Assassin’s Creed) at work and resigned. I’ve been a “UI Specialist” in Queensland Government since 2008 (with a stint off in a management role, then project, in 2010) and it’s been an interesting time. Great people, great flexibility (hard to beat working from home 2 days a week!) and some interesting challenges (supporting IE6 was not one of them).

I have known for a long time that it was a great job, and not a career. Some folks can step up to the challenge of middle management in the public service. I’m part awed, part horrified, by their willingness to make the shift—but it’s not for me. I love coding, I love mentoring and now I’m loving animating. I really want to work in that kind of creative space. (You say management is creative? Um. Ok. In the public service? Not my cup of tea, thanks.)

The new life of Ben begins in TWO WEEKS! I’m hunting for the next job—wish me luck 🙂

ps: Resign from a job. Bucket list: tick!

Now, off to throw a frisbee…