Side Tab Animation

This is a simple keyframe-based animation that slides a series of panels on the screen by clicking on labeled tabs. Clicking on an open tab closes it, clicking a series of tabs steps through the content and, for extra measure (for those who don’t get the click-again- to-close bit), a close box is on the slide-out panel.

This is a flat, single timeline animation, but is easy to adapt for responsive. Note that the white panels with drop shadows are PNGs as the original text was meant to work with IE. A better solution is to use rectangle objects with rounded corners. This obviously makes it adaptable for responsive when a taller, narrow panel would be preferable.

11/18 - Updated link: (1.5 MB)


Nice animations,

Will you be posting the tips & tricks part of how others can replicate it ? :grinning:

1 Like

It’d be great to have a .hype document for this :slight_smile:.

Oops - accidentally left out the Hype doc. Will update.