https://www.siepweb.it/siep/wp/wp-content/themes/avril-personal/assets/js/text-animate.js?ver=7.1.2

1jQuery(document).ready(function($){
2//set animation timing
3var animationDelay = 2500,
4  //loading bar effect
5  barAnimationDelay = 3800,
6  barWaiting = barAnimationDelay - 3000, //3000 is the duration of the transition on the loading bar - set in the scss/css file
7  //letters effect
8  lettersDelay = 50,
9  //type effect
10  typeLettersDelay = 150,
11  selectionDuration = 500,
12  typeAnimationDelay = selectionDuration + 800,
13  //clip effect 
14  revealDuration = 600,
15  revealAnimationDelay = 1500;
16
17initHeadline();
18
19
20function initHeadline() {
21  //insert <i> element for each letter of a changing word
22  singleLetters($('.av-heading.animate-2').find('b'));
23  singleLetters($('.av-heading.animate-3').find('b'));
24  singleLetters($('.av-heading.animate-8').find('b'));
25  singleLetters($('.av-heading.animate-9').find('b'));
26  //initialise headline animation
27  animateHeadline($('.av-heading'));
28}
29
30function singleLetters($words) {
31  $words.each(function(){
32    var word = $(this),
33      letters = word.text().split(''),
34      selected = word.hasClass('is-show');
35    for (i in letters) {
36      if(word.parents('.animate-3').length > 0) letters[i] = '<em>' + letters[i] + '</em>';
37      letters[i] = (selected) ? '<i class="in">' + letters[i] + '</i>': '<i>' + letters[i] + '</i>';
38    }
39      var newLetters = letters.join('');
40      word.html(newLetters).css('opacity', 1);
41  });
42}
43
44function animateHeadline($headlines) {
45  var duration = animationDelay;
46  $headlines.each(function(){
47    var headline = $(this);
48    
49    if(headline.hasClass('animate-4')) {
50      duration = barAnimationDelay;
51      setTimeout(function(){ headline.find('.av-text-wrapper').addClass('is-loading') }, barWaiting);
52    } else if (headline.hasClass('animate-6')){
53      var spanWrapper = headline.find('.av-text-wrapper'),
54        newWidth = spanWrapper.width() + 10
55      spanWrapper.css('width', newWidth);
56    } else if (!headline.hasClass('animate-2') ) {
57      //assign to .av-text-wrapper the width of its longest word
58      var words = headline.find('.av-text-wrapper b'),
59        width = 0;
60      words.each(function(){
61        var wordWidth = $(this).width();
62          if (wordWidth > width) width = wordWidth;
63      });
64      headline.find('.av-text-wrapper').css('width', width);
65    };
66
67    //trigger animation
68    setTimeout(function(){ hideWord( headline.find('.is-show').eq(0) ) }, duration);
69  });
70}
71
72function hideWord($word) {
73  var nextWord = takeNext($word);
74  
75  if($word.parents('.av-heading').hasClass('animate-2')) {
76    var parentSpan = $word.parent('.av-text-wrapper');
77    parentSpan.addClass('selected').removeClass('waiting'); 
78    setTimeout(function(){ 
79      parentSpan.removeClass('selected'); 
80      $word.removeClass('is-show').addClass('is-hide').children('i').removeClass('in').addClass('out');
81    }, selectionDuration);
82    setTimeout(function(){ showWord(nextWord, typeLettersDelay) }, typeAnimationDelay);
83
84  } else if($word.parents('.av-heading').hasClass('animate-2') || $word.parents('.av-heading').hasClass('animate-3') || $word.parents('.av-heading').hasClass('animate-8') || $word.parents('.av-heading').hasClass('animate-9')) {
85    var bool = ($word.children('i').length >= nextWord.children('i').length) ? true : false;
86    hideLetter($word.find('i').eq(0), $word, bool, lettersDelay);
87    showLetter(nextWord.find('i').eq(0), nextWord, bool, lettersDelay);
88
89  }  else if($word.parents('.av-heading').hasClass('animate-6')) {
90    $word.parents('.av-text-wrapper').animate({ width : '2px' }, revealDuration, function(){
91      switchWord($word, nextWord);
92      showWord(nextWord);
93    });
94
95  } else if ($word.parents('.av-heading').hasClass('animate-4')){
96    $word.parents('.av-text-wrapper').removeClass('is-loading');
97    switchWord($word, nextWord);
98    setTimeout(function(){ hideWord(nextWord) }, barAnimationDelay);
99    setTimeout(function(){ $word.parents('.av-text-wrapper').addClass('is-loading') }, barWaiting);
100
101  } else {
102    switchWord($word, nextWord);
103    setTimeout(function(){ hideWord(nextWord) }, animationDelay);
104  }
105}
106
107function showWord($word, $duration) {
108  if($word.parents('.av-heading').hasClass('animate-2')) {
109    showLetter($word.find('i').eq(0), $word, false, $duration);
110    $word.addClass('is-show').removeClass('is-hide');
111
112  }  else if($word.parents('.av-heading').hasClass('animate-6')) {
113    $word.parents('.av-text-wrapper').animate({ 'width' : $word.width() + 10 }, revealDuration, function(){ 
114      setTimeout(function(){ hideWord($word) }, revealAnimationDelay); 
115    });

116  }
117}
118
119function hideLetter($letter, $word, $bool, $duration) {
120  $letter.removeClass('in').addClass('out');
121  
122  if(!$letter.is(':last-child')) {
123    setTimeout(function(){ hideLetter($letter.next(), $word, $bool, $duration); }, $duration);  
124  } else if($bool) { 
125    setTimeout(function(){ hideWord(takeNext($word)) }, animationDelay);
126  }
127
128  if($letter.is(':last-child') && $('html').hasClass('no-csstransitions')) {
129    var nextWord = takeNext($word);
130    switchWord($word, nextWord);
131  } 
132}
133
134function showLetter($letter, $word, $bool, $duration) {
135  $letter.addClass('in').removeClass('out');
136  
137  if(!$letter.is(':last-child')) { 
138    setTimeout(function(){ showLetter($letter.next(), $word, $bool, $duration); }, $duration); 
139  } else { 
140    if($word.parents('.av-heading').hasClass('animate-2')) { setTimeout(function(){ $word.parents('.av-text-wrapper').addClass('waiting'); }, 200);}
141    if(!$bool) { setTimeout(function(){ hideWord($word) }, animationDelay) }
142  }
143}
144
145function takeNext($word) {
146  return (!$word.is(':last-child')) ? $word.next() : $word.parent().children().eq(0);
147}
148
149function takePrev($word) {
150  return (!$word.is(':first-child')) ? $word.prev() : $word.parent().children().last();
151}
152
153function switchWord($oldWord, $newWord) {
154  $oldWord.removeClass('is-show').addClass('is-hide');
155  $newWord.removeClass('is-hide').addClass('is-show');
156}
157
158});