p.ex1
  | TEXTYLE
p.ex2
  | FLIP
p.desc
  | - Simple Text Effect -
a(href="https://codepen.io/mycreatesite/pen/vvpmgy" 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 : #f86f5e;
}
p {
  margin : 0;
  padding : 0;
  font-size : 7rem;
  font-weight : 900;
  line-height : 1;
  letter-spacing : .3rem;
  color : #253057;
  &.desc {
    padding : 1rem;
    font-size : 1rem;
    letter-spacing : .2rem;
    opacity : 0;
    transition : 2s 1.5s;
  }
}
a {
  padding : .5rem;
  font-size : .9rem;
  color : #fff;
  letter-spacing : .15rem;
  text-decoration : none;
  transition : .3s;
  &:hover {
    color : #253057;
  }
}
@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;
  perspective: 200px;
  span {
    transform: rotateY(-90deg);
    opacity: 0;
  }
}


.ex2 {
  opacity : 0;
  perspective : 200px;
  span {
    transform : rotateY(-90deg) rotateX(45deg);
    transform-origin : -50% 75%;
    opacity: 0;
  }
}

/*
 * TextyleFLIP.js - v2.0
 * https://github.com/mycreatesite/TextyleFLIP.js
 * MIT licensed
 * Copyright (C) 2019 ma-ya's CREATE
 * https://myscreate.com
 */
//////plugin code from here//////
(function($){  
 $.fn.textyleF = function(options){
   var target = this;
   var targetTxt = target.contents();
   var defaults = {
     duration : 1000,
     delay : 150,
     easing : 'ease',
     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(i){
     var child = target.children('span');
     target.css('opacity',1);
     child.css('display','inline-block');
     child.each(function(i){
       $(this).delay(setting.delay*i)
         .queue(function(next) {
         $(this).css({
           transform : 'rotateY(0deg) rotateX(0deg)',
           opacity : 1,
           transitionDuration : setting.duration + 'ms',
           transitionTimingFunction : setting.easing
         })
         next();
       });
       if(typeof setting.callback === 'function'){
         $(this).on('transitionend', function() {
           setting.callback.call(this);
         });
       }
     });
   });
 };
}( jQuery ));
//////plugin code to here//////


$(window).on('load',function(){
//////code to call//////
  $('.ex1').textyleF();
  $('.ex2').textyleF({
      duration : 2000,
      delay : 200,
      easing : 'cubic-bezier(0.77, 0, 0.175, 1)',
      callback : function(){
        $(this).css({
          color : '#fff',
          transition : '1s',
        });
        $('.desc').css('opacity',1);
      }
    });
  });