Configurable Text Flip Effect With jQuery - TextyleFLIP.js

Just another text animation plugin which reveals text with a configurable 3D flip effect using jQuery and CSS3 transforms and transitions.

See also:

• Configurable Text Reveal Effect With jQuery - Textyle.js

How to use it:

1. Import both jQuery JavaScript library and the textyleF.min.js script into the page.

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" 
        integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" 
        crossorigin="anonymous">
</script>
<script src="textyleF.min.js"></script>

2. Call the function on the target text container.

<p class="example">jQuery</p>

$(function(){

  $('.example').textyleF();

});

3. The required CSS/CSS3 rules.

/*
parent {
  opacity: 0;
  perspective: xxx; //3d effective dose
}
parent span {
  //flip effect
  transform : rotateY(xxxdeg);  //you can also use 'rotateX' together.
  (transform-origin : xxx;) //If you want.
  //fade effect
  opacity: 0;
}
*/

.example {
  opacity: 0;
  perspective: 200px;
}
.example span {
  transform: rotateY(-90deg);
  opacity: 0;
}

4. Customize the duration of animation. Default: 1000ms.

$('.example').textyleF({
  duration : 2000
});

5. Customize the delay in milliseconds. Default: 150ms.

$('.example').textyleF({
  delay : 200
});

6. Customize the easing effect. Default: 'ease'.

$('.example').textyleF({
  easing : 'cubic-bezier(0.785, 0.135, 0.15, 0.86)'
});

7. Execute a callback function when the animation is completely finished.

$('.example').textyleF({
  callback : function(){
    $(this).css({
    color : '#fff',
    transition : '1s',
    });
  }
  });
});

Changelog:

2019-05-25

• fix : deleted console message about callback function / changed the position of adding css 'display:inline-block' in JS source

---

This awesome jQuery plugin is developed by mycreatesite. For more Advanced Usages, please check the demo page or visit the official website.