I am looking to create an animated floating div. When the div is in the 'closed' state, most of it is hidden on the right side of the screen, with only 20px still visible.
Upon clicking the visible part, I want the div to move to the center of the screen and reveal itself (referred to as the 'open' state).
My challenges include:
- I typically use
margin:autoto center a div, but it behaves strangely when I animate it. - When the div is 'closed', the 'hidden' part causes overflow, resulting in unwanted scrolling.
- The width of the div varies significantly depending on the case, making it difficult to hard code values in CSS.
Does anyone have any ideas on how to achieve this? Even a partial solution would be greatly appreciated.
Update: Here is the solution (thanks to @sonic)
.open{
translateX(-50%);
left:50%;
}
.close {
translateX(-20px);
left:100%;
}