p.ex1
  | TEXTYLE
p.ex2
  | TEXTYLE 
p.desc
  | - Simple Text Effect -
a(href="https://codepen.io/mycreatesite/pen/OrZVem" target="_blank")
  | more effect →

@import url('https://fonts.googleapis.com/css?family=Heebo:300,900');

html,body {
  width : 100%;
  height : 100%;
  margin : 0;
  padding : .2rem 0 0 0;
}

body {
  display : flex;
  flex-direction : column;
  align-items : center;
  justify-content : center;
  font-family: 'Heebo', sans-serif;
  background : #f4f4f4;
}
p {
  margin : 0;
  padding : 0;
  font-size : 7rem;
  font-weight : 900;
  line-height : 1;
  letter-spacing : .3rem;
  color : #222;
  &.desc {
    padding : 1rem;
    font-size : 1rem;
    letter-spacing : .2rem;
    opacity : 0;
    transition : 1.5s 2s;
  }
}
a {
  padding : .5rem;
  font-size : .9rem;
  color : #222;
  letter-spacing : .15rem;
  text-decoration : none;
  transition : .3s;
  &:hover {
    color : #888;
  }
}
@media screen and (max-width: 450px) {
  p {
    font-size: 3rem;
    &.desc {
      font-size: .5rem;
    }
  }
  a {
    font-size: .4rem;
  }
}

//////required propaties from here//////
.ex1 {
  opacity : 0;
  span {
    position: relative;
    top: 10px;
    left: 10px;
    opacity: 0;
  }
}

.ex2 {
  opacity : 0;
  span {
    position: relative;
    left: -10px;
    opacity: 0;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
  }
}
//if animation is unstable, try to use backface-visibility with vendor prefix.

/*
 * Textyle.js - v2.0
 * https://github.com/mycreatesite/Textyle.js
 * MIT licensed
 * Copyright (C) 2019 ma-ya's CREATE
 * https://myscreate.com
 */
//////plugin code from here//////
(function($){  
  $.fn.textyle = function(options){
    var target = this;
    var targetTxt = target.contents();
    var defaults = {
          duration : 400,
          delay : 100,
          easing : 'swing',
          callback : null
        };
    var setting = $.extend(defaults, options);
    //split txt & wrap txt by span
    targetTxt.each(function(){
      var texts = $(this);
      if(this.nodeType === 3){
        mkspn(texts);
      }
    });
    function mkspn(texts){
      texts.replaceWith(texts.text().replace(/(\S)/g,'<span>$1</span>'));
    }
    //txt animation
    return this.each(function(){
      var len = target.children().length;
      target.css('opacity',1);
      for (var i = 0; i < len; i++) {
        target.children('span:eq('+i+')')
        .delay(setting.delay*i)
        .animate({
          opacity : 1,
          top : 0,
          left : 0,
        },setting.duration,setting.easing,setting.callback);
      };
    });
  };
}( jQuery ));
//////plugin code to here//////

$(window).on('load',function(){
//////code to call//////
  $('.ex1').textyle();
  $('.ex2').textyle({
    duration : 600,
    delay : 200,
    easing : 'easeInCubic',
    callback : function(){
      $(this).css({
        color : 'coral',
        transition : '1s',
      });
      $('.desc').css('opacity',1);
    }
  });
});