https://happyme.yoga/wp-content/plugins/dethemekit-for-elementor/i…/sina/assets/js/letter/textfx.js?ver=7.1.2

1/**
2 * TextFx.js
3 * http://www.codrops.com
4 *
5 * Licensed under the MIT license.
6 * http://www.opensource.org/licenses/mit-license.php
7 * 
8 * Copyright 2016, Codrops
9 * http://www.codrops.com
10 */
11;(function(window) {
12
13	'use strict';
14
15	/**
16	 * Equation of a line.
17	 */
18	function lineEq(y2, y1, x2, x1, currentVal) {
19		// y = mx + b
20		var m = (y2 - y1) / (x2 - x1),
21			b = y1 - m * x1;
22
23		return m * currentVal + b;
24	}
25
26	function TextFx(el) {
27		this.el = el;
28		this._init();
29	}
30
31	TextFx.prototype.effects = {
32		'fx1' : {
33			in: {
34				duration: 1000,
35				delay: function(el, index) { return 75+index*40; },
36				easing: 'easeOutElastic',
37				elasticity: 650,
38				opacity: {
39					value: 1,
40					easing: 'easeOutExpo',
41				},
42				translateY: ['50%','0%']
43			},
44			out: {
45				duration: 400,
46				delay: function(el, index) { return index*40; },
47				easing: 'easeOutExpo',
48				opacity: 0,
49				translateY: '-100%'
50			}
51		},
52		'fx2' : {
53			in: {
54				duration: 700,
55				delay: function(el, index) { return index*50; },
56				easing: 'easeOutCirc',
57				opacity: 1,
58				translateX: function(el, index) {
59					return [(50+index*10),0]
60				}
61			},
62			out: {
63				duration: 0,
64				opacity: 0
65			}
66		},
67		'fx3' : {
68			in: {
69				duration: 800,
70				delay: function(el, index) { return index*50; },
71				easing: 'easeOutElastic',
72				opacity: 1,
73				translateY: function(el, index) {
74					return index%2 === 0 ? ['-80%', '0%'] : ['80%', '0%'];
75				}
76			},
77			out: {
78				duration: 800,
79				delay: function(el, index) { return index*50; },
80				easing: 'easeOutExpo',
81				opacity: 0,
82				translateY: function(el, index) {
83					return index%2 === 0 ? '80%' : '-80%';
84				}
85			}
86		},
87		'fx4' : {
88			in: {
89				duration: 700,
90				delay: function(el, index) { return (el.parentNode.children.length-index-1)*80; },
91				easing: 'easeOutElastic',
92				opacity: 1,
93				translateY: function(el, index) {
94					return index%2 === 0 ? ['-80%', '0%'] : ['80%', '0%'];
95				},
96				rotateZ: [90,0]
97			},
98			out: {
99				duration: 500,
100				delay: function(el, index) { return (el.parentNode.children.length-index-1)*80; },
101				easing: 'easeOutExpo',
102				opacity: 0,
103				translateY: function(el, index) {
104					return index%2 === 0 ? '80%' : '-80%';
105				},
106				rotateZ: function(el, index) {
107					return index%2 === 0 ? -25 : 25;
108				}
109			}
110		},
111		'fx5' : {
112			perspective: 1000,
113			in: {
114				duration: 700,
115				delay: function(el, index) { return 550+index*50; },
116				easing: 'easeOutQuint',
117				opacity: {
118					value: 1,
119					easing: 'linear',
120				},
121				translateY: ['-150%','0%'],
122				rotateY: [180,0]
123			},
124			out: {
125				duration: 700,
126				delay: function(el, index) { return index*60; },
127				easing: 'easeInQuint',
128				opacity: {
129					value: 0,
130					easing: 'linear',
131				},
132				translateY: '150%',
133				rotateY: -180
134			}
135		},
136		'fx6' : {
137			in: {
138				duration: 600,
139				easing: 'easeOutQuart',
140				opacity: 1,
141				translateY: function(el, index) {
142					return index%2 === 0 ? ['-40%', '0%'] : ['40%', '0%'];
143				},
144				rotateZ: [10,0]
145			},
146			out: {
147				duration: 0,
148				opacity: 0
149			}
150		},
151		'fx7' : {
152			in: {
153				duration: 250,
154				delay: function(el, index) { return 200+index*25; },
155				easing: 'easeOutCubic',
156				opacity: 1,
157				translateY: ['-50%','0%']
158			},
159			out: {
160				duration: 250,
161				delay: function(el, index) { return index*25; },
162				easing: 'easeOutCubic',
163				opacity: 0,
164				translateY: '50%'
165			}
166		},
167		'fx8' : {
168			in: {
169				duration: 400,
170				delay: function(el, index) { return 150+(el.parentNode.children.length-index-1)*20; },
171				easing: 'easeOutQuad',
172				opacity: 1,
173				translateY: ['100%','0%']
174			},
175			out: {
176				duration: 400,
177				delay: function(el, index) { return (el.parentNode.children.length-index-1)*20; },
178				easing: 'easeInOutQuad',
179				opacity: 0,
180				translateY: '-100%'
181			}
182		},
183		'fx9' : {
184			perspective: 1000,
185			origin: '50% 100%',
186			in: {
187				duration: 400,
188				delay: function(el, index) { return index*50; },
189				easing: 'easeOutSine',
190				opacity: 1,
191				rotateY: [-90,0]
192			},
193			out: {
194				duration: 200,
195				delay: function(el, index) { return index*50; },
196				easing: 'easeOutSine',
197				opacity: 0,
198				rotateY: 45
199			}
200		},
201		'fx10' : {
202			in: {
203				duration: 1000,
204				delay: function(el, index) { return 100+index*30; },
205				easing: 'easeOutElastic',
206				elasticity: anime.random(400, 700),
207				opacity: 1,
208				rotateZ: function(el, index) {
209					return [anime.random(20,40),0];
210				}
211			},
212			out: {
213				duration: 0,
214				opacity: 0
215			}
216		},
217		'fx11' : {
218			perspective: 1000,
219			origin: '50% 100%',
220			in: {
221				duration: 400,
222				delay: function(el, index) { return 200+index*20; },
223				easing: 'easeOutExpo',
224				opacity: 1,
225				rotateY: [-90,0]
226			},
227			out: {
228				duration: 400,
229				delay: function(el, index) { return index*20; },
230				easing: 'easeOutExpo',
231				opacity: 0,
232				rotateY: 90
233			}
234		},
235		'fx12' : {
236			perspective: 1000,
237			origin: '50% 100%',
238			in: {
239				duration: 400,
240				delay: function(el, index) { return 200+index*30; },
241				easing: 'easeOutExpo',
242				opacity: 1,
243				rotateX: [90,0]
244			},
245			out: {
246				duration: 400,
247				delay: function(el, index) { return index*30; },
248				easing: 'easeOutExpo',
249				opacity: 0,
250				rotateX: -90
251			}
252		},
253		'fx13' : {
254			in: {

255				duration: 800,
256				easing: 'easeOutExpo',
257				opacity: 1,
258				translateY: function(el, index) {
259					var p = el.parentNode,
260						lastElOffW = p.lastElementChild.offsetWidth,
261						firstElOffL = p.firstElementChild.offsetLeft,
262						w = p.offsetWidth - lastElOffW - firstElOffL - (p.offsetWidth - lastElOffW - p.lastElementChild.offsetLeft),
263						tyVal = lineEq(0, 200, firstElOffL + w/2, firstElOffL, el.offsetLeft);
264
265					return [Math.abs(tyVal)+50+'%','0%'];
266				},
267				rotateZ: function(el, index) {
268					var p = el.parentNode,
269						lastElOffW = p.lastElementChild.offsetWidth,
270						firstElOffL = p.firstElementChild.offsetLeft,
271						w = p.offsetWidth - lastElOffW - p.firstElementChild.offsetLeft - (p.offsetWidth - lastElOffW - p.lastElementChild.offsetLeft),
272						rz = lineEq(90, -90,firstElOffL + w, firstElOffL, el.offsetLeft);
273
274					return [rz,0];
275				}
276			},
277			out: {
278				duration: 500,
279				easing: 'easeOutExpo',
280				opacity: 0,
281				translateY: '-150%'
282			}
283		},
284		'fx14' : {
285			in: {
286				duration: 500,
287				easing: 'easeOutExpo',
288				delay: function(el, index) { return 200+index*30; },
289				opacity: 1,
290				rotateZ: [20,0],
291				translateY: function(el, index) {
292					var p = el.parentNode,
293						lastElOffW = p.lastElementChild.offsetWidth,
294						firstElOffL = p.firstElementChild.offsetLeft,
295						w = p.offsetWidth - lastElOffW - firstElOffL - (p.offsetWidth - lastElOffW - p.lastElementChild.offsetLeft),
296						tyVal = lineEq(-130, -60, firstElOffL+w, firstElOffL, el.offsetLeft);
297
298					return [Math.abs(tyVal)+'%','0%'];
299				}
300			},
301			out: {
302				duration: 400,
303				easing: 'easeOutExpo',
304				delay: function(el, index) { return (el.parentNode.children.length-index-1)*30; },
305				opacity: 0,
306				rotateZ: 20,
307				translateY: function(el, index) {
308					var p = el.parentNode,
309						lastElOffW = p.lastElementChild.offsetWidth,
310						firstElOffL = p.firstElementChild.offsetLeft,
311						w = p.offsetWidth - lastElOffW - firstElOffL - (p.offsetWidth - lastElOffW - p.lastElementChild.offsetLeft),
312						tyVal = lineEq(-60, -130, firstElOffL+w, firstElOffL, el.offsetLeft);
313
314					return tyVal+'%';
315				}
316			}
317		},
318		'fx15' : {
319			perspective: 1000,
320			in: {
321				duration: 400,
322				delay: function(el, index) { return 100+index*50; },
323				easing: 'easeOutExpo',
324				opacity: 1,
325				rotateX: [110,0]
326			},
327			out: {
328				duration: 400,
329				delay: function(el, index) { return index*50; },
330				easing: 'easeOutExpo',
331				opacity: 0,
332				rotateX: -110
333			}
334		},
335		'fx16' : {
336			in: {
337				duration: function(el, index) { return anime.random(800,1000) },
338				delay: function(el, index) { return anime.random(0,75) },
339				easing: 'easeInOutExpo',
340				opacity: 1,
341				translateY: ['-300%','0%'],
342				rotateZ: function(el, index) { return [anime.random(-50,50), 0]; }
343			},
344			out: {
345				duration: function(el, index) { return anime.random(800,1000) },
346				delay: function(el, index) { return anime.random(0,80) },
347				easing: 'easeInOutExpo',
348				opacity: 0,
349				translateY: '300%',
350				rotateZ: function(el, index) { return anime.random(-50,50); }
351			}
352		},
353		'fx17' : {
354			in: {
355				duration: 650,
356				easing: 'easeOutQuint',
357				delay: function(el, index) { return 450+(el.parentNode.children.length-index-1)*30; },
358				opacity: 1,
359				translateX: function(el, index) {
360					return [-1*el.offsetLeft,0];
361				}
362			},
363			out: {
364				duration: 1,
365				delay: 400,
366				opacity: 0
367			}
368		},
369		'fx18' : {
370			in: {
371				duration: 800,
372				delay: function(el, index) { return 600+index*150; },
373				easing: 'easeInOutQuint',
374				opacity: 1,
375				scaleY: [8,1],
376				scaleX: [0.5,1],
377				translateY: ['-100%','0%']
378			},
379			out: {
380				duration: 800,
381				delay: function(el, index) { return index*150; },
382				easing: 'easeInQuint',
383				opacity: 0,
384				scaleY: {
385					value: 8,
386					delay: function(el, index) { return 100+index*150; },
387				},
388				scaleX: 0.5,
389				translateY: '100%'
390			}
391		}
392	};
393
394	TextFx.prototype._init = function() {
395		this.el.classList.add('letter-effect');
396		// Split word(s) into letters/spans.
397		charming(this.el, {classPrefix: 'letter'});
398		this.letters = [].slice.call(this.el.querySelectorAll('span'));
399		this.lettersTotal = this.letters.length;
400	};
401	
402	TextFx.prototype._stop = function() {
403		anime.remove(this.letters);

404		this.letters.forEach(function(letter) { letter.style.WebkitTransform = letter.style.transform = ''; });
405	};
406
407	TextFx.prototype.show = function(effect, callback) {
408		this._stop();
409		arguments.length ? this._animate('in', effect, callback) : this.letters.forEach(function(letter) { letter.style.opacity = 1; });
410	};
411
412	TextFx.prototype.hide = function(effect, callback) {
413		this._stop();
414		arguments.length ? this._animate('out', effect, callback) : this.letters.forEach(function(letter) { letter.style.opacity = 0; });
415	};
416
417	TextFx.prototype._animate = function(direction, effect, callback) {
418		var effecSettings = typeof effect === 'string' ? this.effects[effect] : effect;
419
420		if( effecSettings.perspective != undefined ) {
421			this.el.style.WebkitPerspective = this.el.style.perspective = effecSettings.perspective + 'px';
422		}
423		if( effecSettings.origin != undefined ) {
424			this.letters.forEach(function(letter) { 
425				letter.style.WebkitTransformOrigin = letter.style.transformOrigin = effecSettings.origin;
426			});
427		}
428
429		// Custom effect
430		var iscustom = this._checkCustomFx(direction, effect, callback);
431
432		var animOpts = effecSettings[direction],
433			target = this.letters;
434		
435		target.forEach(function(t,p) { 
436			if( t.innerHTML === ' ' ) {
437				target.splice(p, 1);
438			}
439		});
440
441		animOpts.targets = target;
442		
443		if( !iscustom ) {
444			animOpts.complete = callback;
445		}
446
447		anime(animOpts);
448	};
449
450	/**
451	 * Extra stuff for an effect.. this is just an example for effect 17.
452	 * TODO! (for now, just some quick way to implement something different only for fx17)
453	 */
454	TextFx.prototype._checkCustomFx = function(direction, effect, callback) {
455		var custom = typeof effect === 'string' && effect === 'fx17' && direction === 'out';
456		
457		if( custom ) {
458			var tmp = document.createElement('div');
459			tmp.style.width = tmp.style.height = '100%';
460			tmp.style.top = tmp.style.left = 0;
461			tmp.style.background = '#e24b1e';
462			tmp.style.position = 'absolute';
463			tmp.style.WebkitTransform = tmp.style.transform = 'scale3d(0,1,1)';
464			tmp.style.WebkitTransformOrigin = tmp.style.transformOrigin = '0% 50%';
465			this.el.appendChild(tmp);
466			var self = this;
467			anime({
468				targets: tmp,
469				duration: 400,
470				easing: 'easeInOutCubic',
471				scaleX: [0,1],
472				complete: function() {
473					tmp.style.WebkitTransformOrigin = tmp.style.transformOrigin = '100% 50%';
474					anime({
475						targets: tmp,
476						duration: 400,
477						easing: 'easeInOutCubic',
478						scaleX: [1,0],
479						complete: function() {
480							self.el.removeChild(tmp);
481							if( typeof callback === 'function' ) {
482								callback();
483							}
484						}
485					});
486				}
487			});
488		}
489
490		return custom;
491	};
492
493	window.TextFx = TextFx;
494
495})(window);