https://eclos.fr/wp-content/themes/kidba/assets/js/animate-headline.js?ver=6.8.2

1jQuery(document).ready(function($){
2	//set animation timing
3	var 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	
17	initHeadline();
18	
19
20	function initHeadline() {
21		//insert <i> element for each letter of a changing word
22		singleLetters($('.cd-headline.letters').find('b'));
23		//initialise headline animation
24		animateHeadline($('.cd-headline'));
25	}
26
27	function singleLetters($words) {
28		$words.each(function(){
29			var word = $(this),
30				letters = word.text().split(''),
31				selected = word.hasClass('is-visible');
32			for (i in letters) {
33				if(word.parents('.rotate-2').length > 0) letters[i] = '<em>' + letters[i] + '</em>';
34				letters[i] = (selected) ? '<i class="in">' + letters[i] + '</i>': '<i>' + letters[i] + '</i>';
35			}
36		    var newLetters = letters.join('');
37		    word.html(newLetters).css('opacity', 1);
38		});
39	}
40
41	function animateHeadline($headlines) {
42		var duration = animationDelay;
43		$headlines.each(function(){
44			var headline = $(this);
45			
46			if(headline.hasClass('loading-bar')) {
47				duration = barAnimationDelay;
48				setTimeout(function(){ headline.find('.cd-words-wrapper').addClass('is-loading') }, barWaiting);
49			} else if (headline.hasClass('clip')){
50				var spanWrapper = headline.find('.cd-words-wrapper'),
51					newWidth = spanWrapper.width() + 10
52				spanWrapper.css('width', newWidth);
53			} else if (!headline.hasClass('type') ) {
54				//assign to .cd-words-wrapper the width of its longest word
55				var words = headline.find('.cd-words-wrapper b'),
56					width = 0;
57				words.each(function(){
58					var wordWidth = $(this).width();
59				    if (wordWidth > width) width = wordWidth;
60				});
61				headline.find('.cd-words-wrapper').css('width', width);
62			};
63
64			//trigger animation
65			setTimeout(function(){ hideWord( headline.find('.is-visible').eq(0) ) }, duration);
66		});
67	}
68
69	function hideWord($word) {
70		var nextWord = takeNext($word);
71		
72		if($word.parents('.cd-headline').hasClass('type')) {
73			var parentSpan = $word.parent('.cd-words-wrapper');
74			parentSpan.addClass('selected').removeClass('waiting');	
75			setTimeout(function(){ 
76				parentSpan.removeClass('selected'); 
77				$word.removeClass('is-visible').addClass('is-hidden').children('i').removeClass('in').addClass('out');
78			}, selectionDuration);
79			setTimeout(function(){ showWord(nextWord, typeLettersDelay) }, typeAnimationDelay);
80		
81		} else if($word.parents('.cd-headline').hasClass('letters')) {
82			var bool = ($word.children('i').length >= nextWord.children('i').length) ? true : false;
83			hideLetter($word.find('i').eq(0), $word, bool, lettersDelay);
84			showLetter(nextWord.find('i').eq(0), nextWord, bool, lettersDelay);
85
86		}  else if($word.parents('.cd-headline').hasClass('clip')) {
87			$word.parents('.cd-words-wrapper').animate({ width : '2px' }, revealDuration, function(){
88				switchWord($word, nextWord);
89				showWord(nextWord);
90			});
91
92		} else if ($word.parents('.cd-headline').hasClass('loading-bar')){
93			$word.parents('.cd-words-wrapper').removeClass('is-loading');
94			switchWord($word, nextWord);
95			setTimeout(function(){ hideWord(nextWord) }, barAnimationDelay);
96			setTimeout(function(){ $word.parents('.cd-words-wrapper').addClass('is-loading') }, barWaiting);
97
98		} else {
99			switchWord($word, nextWord);
100			setTimeout(function(){ hideWord(nextWord) }, animationDelay);
101		}
102	}
103
104	function showWord($word, $duration) {
105		if($word.parents('.cd-headline').hasClass('type')) {
106			showLetter($word.find('i').eq(0), $word, false, $duration);
107			$word.addClass('is-visible').removeClass('is-hidden');
108
109		}  else if($word.parents('.cd-headline').hasClass('clip')) {
110			$word.parents('.cd-words-wrapper').animate({ 'width' : $word.width() + 10 }, revealDuration, function(){ 
111				setTimeout(function(){ hideWord($word) }, revealAnimationDelay); 
112			});
113		}
114	}
115
116	function hideLetter($letter, $word, $bool, $duration) {
117		$letter.removeClass('in').addClass('out');
118		
119		if(!$letter.is(':last-child')) {
120		 	setTimeout(function(){ hideLetter($letter.next(), $word, $bool, $duration); }, $duration);  
121		} else if($bool) { 
122		 	setTimeout(function(){ hideWord(takeNext($word)) }, animationDelay);
123		}
124
125		if($letter.is(':last-child') && $('html').hasClass('no-csstransitions')) {
126			var nextWord = takeNext($word);
127			switchWord($word, nextWord);
128		} 
129	}
130
131	function showLetter($letter, $word, $bool, $duration) {
132		$letter.addClass('in').removeClass('out');
133		
134		if(!$letter.is(':last-child')) { 
135			setTimeout(function(){ showLetter($letter.next(), $word, $bool, $duration); }, $duration); 
136		} else { 
137			if($word.parents('.cd-headline').hasClass('type')) { setTimeout(function(){ $word.parents('.cd-words-wrapper').addClass('waiting'); }, 200);}
138			if(!$bool) { setTimeout(function(){ hideWord($word) }, animationDelay) }
139		}
140	}
141
142	function takeNext($word) {
143		return (!$word.is(':last-child')) ? $word.next() : $word.parent().children().eq(0);
144	}
145
146	function takePrev($word) {
147		return (!$word.is(':first-child')) ? $word.prev() : $word.parent().children().last(

147);
148	}
149
150	function switchWord($oldWord, $newWord) {
151		$oldWord.removeClass('is-visible').addClass('is-hidden');
152		$newWord.removeClass('is-hidden').addClass('is-visible');
153	}
154});