(function ($) { "use strict"; function widgetAnimatedText( $scope ) { var $target = $scope.find( '.jet-animated-text' ), instance = null, settings = {}; if ( ! $target.length ) { return; } settings = $target.data( 'settings' ); instance = new jetAnimatedText( $target, settings ); instance.init(); } /** * Jet animated text Class * * @return {void} */ class jetAnimatedText { constructor( $selector, settings ) { var self = this, $instance = $selector, $animatedTextContainer = $( '.jet-animated-text__animated-text', $instance ), $animatedTextList = $( '.jet-animated-text__animated-text-item', $animatedTextContainer ), timeOut = null, defaultSettings = { effect: 'fx1', delay: 3000 }, settings = $.extend( defaultSettings, settings || {} ), currentIndex = 0, animationDelay = settings.delay; /** * Avaliable Effects */ self.avaliableEffects = { fx1: { in: { duration: 1000, delay: function ( el, index ) { return 75 + index * 100; }, easing: 'easeOutElastic', elasticity: 650, opacity: { value: [ 0, 1 ], easing: 'easeOutExpo' }, translateY: [ '100%', '0%' ] }, out: { duration: 300, delay: function ( el, index ) { return index * 40; }, easing: 'easeInOutExpo', opacity: 0, translateY: '-100%' } }, fx2: { in: { duration: 800, delay: function ( el, index ) { return index * 50; }, easing: 'easeOutElastic', opacity: { value: [ 0, 1 ], easing: 'easeOutExpo' }, translateY: function ( el, index ) { return index % 2 === 0 ? [ '-80%', '0%' ] : [ '80%', '0%' ]; } }, out: { duration: 300, delay: function ( el, index ) { return index * 20; }, easing: 'easeOutExpo', opacity: 0, translateY: function ( el, index ) { return index % 2 === 0 ? '80%' : '-80%'; } } }, fx3: { in: { duration: 700, delay: function ( el, index ) { return ( el.parentNode.children.length - index - 1 ) * 80; }, easing: 'easeOutElastic', opacity: { value: [ 0, 1 ], easing: 'easeOutExpo' }, translateY: function ( el, index ) { return index % 2 === 0 ? [ '-80%', '0%' ] : [ '80%', '0%' ]; }, rotateZ: [ 90, 0 ] }, out: { duration: 300, delay: function ( el, index ) { return ( el.parentNode.children.length - index - 1 ) * 50; }, easing: 'easeOutExpo', opacity: 0, translateY: function ( el, index ) { return index % 2 === 0 ? '80%' : '-80%'; }, rotateZ: function ( el, index ) { return index % 2 === 0 ? -25 : 25; } } }, fx4: { in: { duration: 700, delay: function ( el, index ) { return 550 + index * 50; }, easing: 'easeOutQuint', opacity: { value: [ 0, 1 ], easing: 'easeOutExpo' }, translateY: [ '-150%', '0%' ], rotateY: [ 180, 0 ] }, out: { duration: 200, delay: function ( el, index ) { return index * 30; }, easing: 'easeInQuint', opacity: { value: 0, easing: 'linear' }, translateY: '100%', rotateY: -180 } }, fx5: { in: { duration: 250, delay: function ( el, index ) { return 200 + index * 25; }, easing: 'easeOutCubic', opacity: { value: [ 0, 1 ], easing: 'easeOutExpo' }, translateY: [ '-50%', '0%' ] }, out: { duration: 250, delay: function ( el, index ) { return index * 25; }, easing: 'easeOutCubic', opacity: 0, translateY: '50%' } }, fx6: { in: { duration: 400, delay: function ( el, index ) { return index * 50; }, easing: 'easeOutSine', opacity: { value: [ 0, 1 ], easing: 'easeOutExpo' }, rotateY: [ -90, 0 ] }, out: { duration: 200, delay: function ( el, index ) { return index * 50; }, easing: 'easeOutSine', opacity: 0, rotateY: 45 } }, fx7: { in: { duration: 1000, delay: function ( el, index ) { return 100 + index * 30; }, easing: 'easeOutElastic', opacity: { value: [ 0, 1 ], easing: 'easeOutExpo' }, rotateZ: function ( el, index ) { return [ anime.random( 20, 40 ), 0 ]; } }, out: { duration: 300, opacity: { value: [ 1, 0 ], easing: 'easeOutExpo' } } }, fx8: { in: { duration: 400, delay: function ( el, index ) { return 200 + index * 20; }, easing: 'easeOutExpo', opacity: 1, rotateY: [ -90, 0 ], translateY: [ '50%', '0%' ] }, out: { duration: 250, delay: function ( el, index ) { return index * 20; }, easing: 'easeOutExpo', opacity: 0, rotateY: 90 } }, fx9: { in: { duration: 400, delay: function ( el, index ) { return 200 + index * 30; }, easing: 'easeOutExpo', opacity: 1, rotateX: [ 90, 0 ] }, out: { duration: 250, delay: function ( el, index ) { return index * 30; }, easing: 'easeOutExpo', opacity: 0, rotateX: -90 } }, fx10: { in: { duration: 400, delay: function ( el, index ) { return 100 + index * 50; }, easing: 'easeOutExpo', opacity: { value: [ 0, 1 ], easing: 'easeOutExpo' }, rotateX: [ 110, 0 ] }, out: { duration: 250, delay: function ( el, index ) { return index * 50; }, easing: 'easeOutExpo', opacity: 0, rotateX: -110 } }, fx11: { in: { duration: function ( el, index ) { return anime.random( 800, 1000 ); }, delay: function ( el, index ) { return anime.random( 100, 300 ); }, easing: 'easeOutExpo', opacity: { value: [ 0, 1 ], easing: 'easeOutExpo' }, translateY: [ '-150%', '0%' ], rotateZ: function ( el, index ) { return [ anime.random( -50, 50 ), 0 ]; } }, out: { duration: function ( el, index ) { return anime.random( 200, 300 ); }, delay: function ( el, index ) { return anime.random( 0, 80 ); }, easing: 'easeInQuart', opacity: 0, translateY: '50%', rotateZ: function ( el, index ) { return anime.random( -50, 50 ); } } }, fx12: { in: { elasticity: false, duration: 1, delay: function ( el, index ) { return index * 100 + anime.random( 50, 100 ); }, width: [ 0, function ( el ) { return $( el ).width(); } ] }, out: { duration: 1, delay: function ( el, index ) { return ( el.parentNode.children.length - index - 1 ) * 20; }, easing: 'linear', width: { value: 0 } } } }; self.textChange = function () { var $prevText = $animatedTextList.eq( currentIndex ), $nextText; currentIndex = currentIndex < $animatedTextList.length - 1 ? currentIndex + 1 : 0; $nextText = $animatedTextList.eq( currentIndex ); self.hideText( $prevText, settings.effect, null, function () { $prevText.toggleClass( 'visible' ); if ( timeOut ) { clearTimeout( timeOut ); } self.showText( $nextText, settings.effect, function () { $nextText.toggleClass( 'active visible' ); $prevText.toggleClass( 'active' ); }, function () { timeOut = setTimeout( function () { self.textChange(); }, animationDelay ); } ); } ); }; self.showText = function ( $selector, effect, beginCallback, completeCallback ) { var targets = []; $( 'span', $selector ).each( function () { $( this ).css( { width: 'auto', opacity: 1, WebkitTransform: '', transform: '' } ); targets.push( this ); } ); self.animateText( targets, 'in', effect, beginCallback, completeCallback ); }; self.hideText = function ( $selector, effect, beginCallback, completeCallback ) { var targets = []; $( 'span', $selector ).each( function () { targets.push( this ); } ); self.animateText( targets, 'out', effect, beginCallback, completeCallback ); }; self.animateText = function ( targets, direction, effect, beginCallback, completeCallback ) { var effectSettings = self.avaliableEffects[ effect ] || {}, animationOptions = effectSettings[ direction ]; animationOptions.targets = targets; animationOptions.begin = beginCallback; animationOptions.complete = completeCallback; anime( animationOptions ); }; self.init = function () { var $text = $animatedTextList.eq( currentIndex ); if ( 'fx12' === settings.effect ) { $( 'span', $animatedTextList ).each( function () { $( this ).css( { width: '0', opacity: '1' } ); } ); } self.showText( $text, settings.effect, null, function () { timeOut = setTimeout( function () { self.textChange(); }, animationDelay ); } ); }; } } window.widgetAnimatedText = widgetAnimatedText; })( jQuery );