Text shape animation, animating shape-outside

Question

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

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 1

Disclaimer : The shape-outside property should not be used in live projects¹. 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 webkit browsers as Firefox and IE/Edge don't support the shape-outside property or the clip-path property with a polygon() value.

Here is an example (webkit only) :

.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;
  shape-outside: 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;
}
.mainDiv:hover .element {
  shape-outside: 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>

¹_{The CSS Shapes Module Level 1 currently (october 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.}