Simple Slide Out Content
- June 23, 2016 3:48 PM
- CSS, User Interface Design, Experiments
- Comments (0)
This is a super simple CSS example (backed up with just enough JS to show it off), but its still fun. I have a requirement for a specific animation - the team wanted the panel to slide open, but the content to already be there, at normal size in the panel, and they wanted that content to be attached to the side that was sliding.
Nothing fancy. The only real trick is the float-right so that the content is attached to the right side. I could also have looked at something where the content had a negative margin and the that animated so it slid in, or translatedY so it moved in, but that wasn't necessary for this solution.