Sunil Gehlot Sunil Gehlot - 1 month ago 18
CSS Question

Text shape animation, animating shape-outside

I am trying to achieve the following animation on the text of a paragraph :

paragraph animation : changing the shape of the text

The aim is to animate the boundaries of the text according to the shape on the left. This is what I have tried but I can't figure out the transition on the text shape :



.mainDiv {
width: 600px;
margin: 0px auto;
border: solid 1px #000;
padding: 10px;
min-height: 200px;
}
.element {
width: 200px;
height: 200px;
background: #e3f5f1;
float: left;
margin-right: 5px;
}
.textElement {
width: 395px;
float: left;
}

<div class="mainDiv">
<div class="element"></div>
<div class="textElement">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus Page Maker including versions of Lorem Ipsum, and more recently with desktop publishing software.
</div>
</div>





I don't have much knowledge of CSS transitions and animations, so I hope to get some help.

Answer

Disclaimer : The shape-outside property should not be used in live projects1. It may be subject to undesired behaviours.

This kind of layout can be achieved with the by animating the shape-outside and the clip-path properties. Both properties can be transitioned to make the animation.

The drawback is that both have very low browser support and today, this animation will only work in Chrome as Firefox doesn't support the shape-outside property or the clip-path property with a polygon() value.

Here is an example :

.mainDiv{
  width:600px;
  margin:0px auto;
  border:solid 1px #000;
  padding:10px;
  min-height:200px;
}
.element{
  width:200px;
  height:200px;
  background:#e3f5f1;
  float:left;
  margin-right:5px;
  -webkit-shape-outside: polygon(0% 0%, 100% 0%, 100% 100%, 0 100%);
          shape-outside: polygon(0% 0%, 100% 0%, 100% 100%, 0 100%);
  -webkit-clip-path:polygon(0% 0%, 100% 0%, 100% 100%, 0 100%);
          clip-path:polygon(0% 0%, 100% 0%, 100% 100%, 0 100%);
  transition: clip-path 1s, shape-outside 1s;
  transition: -webkit-clip-path 1s, shape-outside 1s;
}
.element:hover{
  -webkit-shape-outside: polygon(0% 0%, 100% 50%, 100% 50%, 0 100%);
          shape-outside: polygon(0% 0%, 100% 50%, 100% 50%, 0 100%);
  -webkit-clip-path:polygon(0% 0%, 100% 50%, 100% 50%, 0 100%);
          clip-path:polygon(0% 0%, 100% 50%, 100% 50%, 0 100%);
  
}
<div class="mainDiv">
  <div class="element"></div>
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus Page Maker including versions of Lorem Ipsum, and more recently with desktop publishing software.
</div>

1The CSS Shapes Module Level 1 currently (April 2016) has the status of "Candidate Recommendation". As this means it is a work in progress, it may change at any moment and therefore should not be used other than for testing.