Side Tab Animation


(Trey Yancy) #1

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:
SideTabAnimation.zip (1.5 MB)


(Mark Hunte) #2

Nice animations,

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


(Jonathan Deutsch) #3

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


(Trey Yancy) #4

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