.clipped

The task here is to cut what is below a certain height without breaking what is inside.

We can't just animate height. Some cases like CSS columns can be broken. So we first measure the height of the component as it is and the set the value as style="height: ..."; on .clipped__content

Next, on the .clipped__viewport wrapping div, we run the height animation from a certain canonical height that we set earlier to the value that we got. Actually we just change the height values here. The animation will be run by CSS when value changed.


Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent pretium nisl neque, hendrerit eleifend leo auctor a. Ut a nulla at leo posuere tristique at at velit. Nulla ut lobortis sem. Mauris interdum lacus eget lorem auctor, eu imperdiet ex euismod. Ut dictum nibh non blandit molestie. Morbi quis massa in tellus suscipit fermentum. Curabitur id elit nunc. Pellentesque consequat varius turpis nec semper. Integer dui mi, convallis in tellus nec, suscipit molestie massa. Nunc sed consectetur ipsum. Proin nec tortor id ex cursus lobortis. Vivamus eget felis quis libero pellentesque semper. In egestas neque non ultricies finibus. Ut quis hendrerit purus. Donec in orci nec velit semper consequat eget vestibulum ante. Pellentesque efficitur dolor a faucibus tempor. Etiam eu urna elementum, posuere risus eu, cursus nisl. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam rutrum nulla a orci dapibus tristique. Nulla turpis leo, dapibus eget vehicula sed, auctor id eros. Donec dictum dapibus diam dictum bibendum. Sed iaculis sapien tortor, et mattis nisl sodales at. Mauris tristique odio at nibh tristique, id finibus enim porttitor. Pellentesque id urna sit amet tellus pellentesque sagittis ut vitae nunc. Fusce eget aliquam eros. Aliquam venenatis sapien at augue congue tincidunt. Suspendisse dictum tempus viverra. Quisque odio eros, tristique rhoncus iaculis at, faucibus at nulla. Vivamus sodales, ex at dignissim congue, nunc orci sagittis ipsum, vitae pellentesque ipsum nunc sed elit. Curabitur rutrum a elit ac interdum. Nullam in vehicula urna, a finibus ligula. Curabitur sit amet libero ut lorem vestibulum interdum. Vestibulum pretium, ante at fermentum molestie, nulla mauris pharetra sem, et malesuada massa nunc sed tortor. Ut non mauris vel massa sagittis varius vel a arcu. Vestibulum mollis nisi sodales, feugiat elit sit amet, rhoncus metus. Phasellus blandit, nisi id viverra consequat, neque urna bibendum mi, sit amet porttitor magna odio eget urna. Quisque et sodales odio.



Details

data-canonical-height -- height we want to see on the page when clipped.

data-actual-height -- height of content inside.

.clipped--expandable -- this class is being added if we need clipping from the first place. If this class is not presented, no JS will be run. Also read more button visibility depends on this class.

.clipped--open -- when expanded. We need to know what animation to run: from canonical height to actual or vise versa. Also read more button appearance is based on it (more/less, angle).

See sample: ../scripts/_clipped.js