Animorph Append

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="https://unpkg.com/animorph/dist/animorph.jquery.min.js"></script>
<script src="https://unpkg.com/animorph/dist/animorph.jquery.min.js"></script>
<div class="source">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus nulla tortor, congue ut accumsan quis, convallis ut eros.
</div>

<div class="target"></div>

CSS

.source {
  position: absolute;
  opacity: 0;
  bottom: 0;
}

.am-animate {
  transition: 2s all;
  transition-delay: 0.3s;
}

.am-leave-stagger,
.am-move-stagger,
.am-enter-stagger {
  transition-delay: 0.1s;
}

.am-enter,
.am-enter-prepare {
  opacity: 0;
}

Babel + JSX

// Split text into characters
$(".source").html(
  $(".source").text().split("")
  	.map((character) => 
    	`<span class="character">${character}</span>`
    )
);

// Animate it
$(() => $(".character").amAppendTo(".target"));