How to add mirroring animation over text
<script src=”https://unpkg.com/scroll-out/dist/scroll-out.min.js”> </script> <script src=”https://unpkg.com/splitting/dist/splitting.js”> </script>
<span id=”jjrd-head-text” class=”text text–turning” data-scroll=”out” data-splitting=””>ERP + eCommerce</span>
/* transform */
.jjrd-benefits .text .char { display:inline-flex; -webkit-animation-delay: calc(0.25s + var(–char-index) * 0.1s); animation-delay: calc(0.25s + var(–char-index) * 0.1s); transition: all 0.25s calc(0.25s + var(–char-index) * 0.1s); }.
.jjrd-benefits .text–turning [data-scroll=’out’] .char { -webkit-transform: rotateY(90deg); transform: rotateY(90deg);}
reference : https://codepen.io/abdulrazakshaikh/pen/aaeBBm