//jQuery.noConflict(); jQuery(document).on('elementor/render/animation-text',function(e){ jQuery(".eae-at-animation-text-wrapper .eae-at-animation-text:first-child").addClass("is-visible"); //set animation timing var animationDelay = 2500, //loading bar effect barAnimationDelay = 3800, barWaiting = barAnimationDelay - 3000, //3000 is the duration of the transition on the loading bar - set in the scss/css file //letters effect lettersDelay = 50, //type effect typeLettersDelay = 150, selectionDuration = 500, typeAnimationDelay = selectionDuration + 800, //clip effect revealDuration = 600, revealAnimationDelay = 1500; initHeadline(); function initHeadline() { //insert element for each letter of a changing word singleLetters(jQuery('.eae-at-animation.letters').find('.eae-at-animation-text')); //initialise headline animation animateHeadline(jQuery('.eae-at-animation-text-wrapper')); } function singleLetters($words) { $words.each(function(){ var word = jQuery(this), letters = word.text().split(''), selected = word.hasClass('is-visible'); for (i in letters) { letters[i] = (selected) ? '' + letters[i] + '': '' + letters[i] + ''; } var newLetters = letters.join(''); word.html(newLetters).css('opacity', 1); }); } function animateHeadline($headlines) { var duration = animationDelay; $headlines.each(function(){ var headline = jQuery(this); if (!headline.hasClass('type') ) { //assign to .eae-at-animation-text-wrapper the width of its longest word var words = headline.find('.eae-at-animation-text-wrapper .eae-at-animation-text'), width = 0; words.each(function(){ var wordWidth = jQuery(this).width(); if (wordWidth > width) width = wordWidth; }); headline.find('.eae-at-animation-text-wrapper').css('width', width); }; //trigger animation setTimeout(function(){ hideWord( headline.find('.is-visible').eq(0) ) }, duration); }); } function hideWord($word) { console.log($word); var nextWord = takeNext($word); if($word.parents('.eae-at-animation').hasClass('type')) { var parentSpan = $word.parent('.eae-at-animation-text-wrapper'); parentSpan.addClass('selected').removeClass('waiting'); setTimeout(function(){ parentSpan.removeClass('selected'); $word.removeClass('is-visible').addClass('is-hidden').children('i').removeClass('in').addClass('out'); }, selectionDuration); setTimeout(function(){ showWord(nextWord, typeLettersDelay) }, typeAnimationDelay); } else if($word.parents('.eae-at-animation').hasClass('letters')) { var bool = ($word.children('i').length >= nextWord.children('i').length) ? true : false; hideLetter($word.find('i').eq(0), $word, bool, lettersDelay); showLetter(nextWord.find('i').eq(0), nextWord, bool, lettersDelay); } else { switchWord($word, nextWord); setTimeout(function(){ hideWord(nextWord) }, animationDelay); } } function showWord($word, $duration) { if($word.parents('.eae-at-animation').hasClass('type')) { showLetter($word.find('i').eq(0), $word, false, $duration); $word.addClass('is-visible').removeClass('is-hidden'); } } function hideLetter($letter, $word, $bool, $duration) { $letter.removeClass('in').addClass('out'); if(!$letter.is(':last-child')) { setTimeout(function(){ hideLetter($letter.next(), $word, $bool, $duration); }, $duration); } else if($bool) { setTimeout(function(){ hideWord(takeNext($word)) }, animationDelay); } if($letter.is(':last-child') && jQuery('html').hasClass('no-csstransitions')) { var nextWord = takeNext($word); switchWord($word, nextWord); } } function showLetter($letter, $word, $bool, $duration) { $letter.addClass('in').removeClass('out'); if(!$letter.is(':last-child')) { setTimeout(function(){ showLetter($letter.next(), $word, $bool, $duration); }, $duration); } else { if($word.parents('.eae-at-animation').hasClass('type')) { setTimeout(function(){ $word.parents('.eae-at-animation-text-wrapper').addClass('waiting'); }, 200);} if(!$bool) { setTimeout(function(){ hideWord($word) }, animationDelay) } } } function takeNext($word) { return (!$word.is(':last-child')) ? $word.next() : $word.parent().children().eq(0); } function takePrev($word) { return (!$word.is(':first-child')) ? $word.prev() : $word.parent().children().last(); } function switchWord($oldWord, $newWord) { $oldWord.removeClass('is-visible').addClass('is-hidden'); $newWord.removeClass('is-hidden').addClass('is-visible'); } });