1class peTextAnimation { 2 3 constructor(DOM_el, revert, options, fromOptions, scroll, out) { 4 this.DOM = { 5 el: null, 6 chars: null, 7 words: null, 8 lines: null 9 }; 10 11 this.DOM.el = DOM_el; 12 this.settings = this.DOM.el.dataset.settings; 13 14 const properties = this.settings.slice(1, -1).split(';'); 15 16 const settings = properties.reduce((acc, property) => { 17 const [key, value] = property.split('='); 18 acc[key] = parseValue(value); 19 return acc; 20 }, {}); 21 22 function parseValue(value) { 23 24 if (value === "true" || value === "false") { 25 return value === "true"; 26 } 27 28 const parsedNumber = parseFloat(value.replace(',', '.')); 29 if (!isNaN(parsedNumber)) { 30 return parsedNumber; 31 } 32 33 return value; 34 } 35 36 this.stagger = settings.stagger; 37 this.duration = settings.duration; 38 this.delay = settings.delay; 39 this.scrub = settings.scrub; 40 this.pin = settings.pin; 41 this.pinTarget = settings.pinTarget; 42 this.animOut = settings.out; 43 this.target = settings.target; 44 45 this.inserted = settings.inserted; 46 this.parented = settings.parented; 47 48 function parents(element, selector) { 49 const parentsArray = []; 50 let currentElement = element.parentElement; 51 52 while (currentElement !== null) { 53 if (currentElement.matches(selector)) { 54 parentsArray.push(currentElement); 55 } 56 currentElement = currentElement.parentElement; 57 } 58 59 return parentsArray; 60 } 61 62 if (this.parented) { 63 64 this.parent = parents(this.DOM.el, '.tde__parent'); 65 } 66 67 68 this.animations = ['charsUp', 'charsDown', 'charsRight', 'charsLeft', 'wordsUp', 'wordsDown', 'linesUp', 'linesDown', 'charsFadeOn', 'wordsFadeOn', 'linesFadeOn', 'charsScaleUp', 'charsScaleDown', 'charsRotateIn', 'charsFlipUp', 'charsFlipDown', 'linesMask', 'wordsJustifyCollapse', 'wordsJustifyExpand', 'slideLeft', 'slideRight']; 69 70 this.defaults = { 71 yPercent: 0, 72 xPercent: 0, 73 x: 0, 74 y: 0, 75 duration: 1, 76 delay: 0, 77 stagger: 0, 78 ease: 'expo.out', 79 onComplete: () => { 80 this.DOM.el.classList.add('is-inview') 81 // this.pin != true && this.scrub != true && loader == null && !this.inserted && ! parents(this.DOM.el , '[data-elementor-type="pe-menu"]').length ? this.split.revert() : ''; 82 this.progress = 1; 83 } 84 }; 85 86 this.from = { 87 yPercent: 0, 88 xPercent: 0, 89 x: 0, 90 y: 0, 91 } 92 93 this.scroll = { 94 scrollTrigger: { 95 trigger: null, 96 scrub: null, 97 pin: null, 98 start: 'top bottom', 99 end: 'bottom center', 100 onEnter: () => { 101 this.DOM.el.classList.add('viewport-enter'); 102 103 this.parent ? this.parent[0].classList.add('tde__enter'):''; 104 105 } 106 } 107 } 108 109 this.out = { 110 yPercent: null, 111 stagger: null, 112 duration: null, 113 ease: 'expo.in', 114 delay: 0 115 } 116 117 this.id = Math.random().toString(16).slice(2); 118 119 this.scroll.scrollTrigger.start = settings.item_ref_start + ' ' + settings.window_ref_start; 120 this.scroll.scrollTrigger.end = settings.item_ref_end + ' ' + settings.window_ref_end; 121 122 this.progress = 0; 123 124 this.pin == null ? this.pin = false : ''; 125 this.scrub == null ? this.scrub = false : ''; 126 this.animOut == null ? this.animOut = false : ''; 127 128 let animations = this.animations; 129 130 this.anim = this.DOM.el.dataset.animation; 131 132 this.anim.includes('chars') ? this.type = 'chars, words' : ''; 133 this.anim.includes('words') ? this.type = 'words, chars' : ''; 134 this.anim.includes('lines') ? this.type = 'lines' : ''; 135 this.anim.includes('Justify') ? this.type = 'lines, words' : ''; 136 137 this.split = new SplitText(this.DOM.el, { 138 type: this.type, 139 charsClass: 'anim_char', 140 linesClass: 'anim_line', 141 wordsClass: 'anim_word', 142 reduceWhiteSpace: true 143 }); 144 145 // Inner Elememnts Handle 146 if (this.DOM.el.querySelectorAll('[class^="inner--"]')) { 147 148 let inner = this.DOM.el.querySelectorAll('[class^="inner--"]'); 149 150 inner.forEach((element) => { 151 152 let wrap = document.createElement('div'), 153 span = document.createElement('span'); 154 155 wrap.classList.add(this.anim.includes('chars') ? 'anim_char' : this.anim.includes('words') ? 'anim_word' : ''); 156 157 document.createElement('span'); 158 element.parentNode.insertBefore(wrap, element); 159 wrap.appendChild(span); 160 span.appendChild(element); 161 162 }) 163 164 } 165 166 if (this.anim.includes('words')) { 167 168 let words = this.DOM.el.querySelectorAll('.anim_word'); 169 170 words.forEach(function (word) { 171 172 word.innerHTML = '<span>' + word.innerHTML + '</span>'; 173 }); 174 175 this.target = this.DOM.el.querySelectorAll('.anim_word > span:not(.dynamic-word span)'); 176 } 177 178 if (this.anim.includes('chars')) { 179 180 let chars = this.DOM.el.querySelectorAll('.anim_char'); 181
182 chars.forEach(function (char) { 183 184 char.innerHTML = '<span>' + char.innerHTML + '</span>'; 185 }); 186 187 188 this.target = this.DOM.el.querySelectorAll('.anim_char > span:not(.dynamic-word span)'); 189 } 190 191 if (this.anim.includes('lines')) { 192 193 this.DOM.el.querySelectorAll('.anim_line').innerHTML = '<span>' + this.DOM.el.querySelectorAll('.anim_line').innerHTML + '</span>'; 194 195 let lines = this.DOM.el.querySelectorAll('.anim_line'); 196 197 lines.forEach(function (line) { 198 199 line.innerHTML = '<span>' + line.innerHTML + '</span>'; 200 }); 201 202 this.target = this.DOM.el.querySelectorAll('.anim_line > span:not(.dynamic-word span)'); 203 } 204 205 if (this.anim === 'charsUp') { 206 this.from.yPercent = 100; 207 this.defaults.yPercent = 0; 208 this.defaults.stagger = 0.05; 209 this.defaults.duration = 2; 210 this.animOut ? this.out.yPercent = -100 : ''; 211 212 } 213 214 215 if (this.anim === 'charsDown') { 216 this.from.yPercent = -100 217 this.defaults.stagger = 0.035; 218 this.defaults.duration = 2; 219 220 this.animOut ? this.out.yPercent = 100 : ''; 221 } 222 223 if (this.anim === 'charsRight') { 224 225 this.from.x = -100 226 this.defaults.x = 0 227 228 } 229 230 if (this.anim === 'charsLeft') { 231 232 233 this.from.x = 100 234 this.defaults.x = 0 235 } 236 237 if (this.anim === 'wordsUp') { 238 239 this.from.yPercent = 100 240 241 this.defaults.stagger = 0.025; 242 this.defaults.duration = 2; 243 244 this.animOut ? this.out.yPercent = -100 : ''; 245 } 246 247 if (this.anim === 'wordsDown') { 248 249 this.from.yPercent = -100 250 251 this.defaults.stagger = -0.01; 252 this.defaults.duration = 2; 253 } 254 255 if (this.anim === 'linesUp') { 256 257 this.from.yPercent = 100 258 259 this.defaults.stagger = 0.15; 260 this.defaults.duration = 2; 261 this.defaults.ease = 'expo.out'; 262 } 263 264 if (this.anim === 'linesDown') { 265 266 this.from.yPercent = -100 267 268 this.defaults.stagger = -0.1; 269 this.defaults.duration = 1.5; 270 } 271 272 if (this.anim === 'charsFadeOn') { 273 274 this.defaults.opacity = 1; 275 276 this.defaults.stagger = 0.01; 277 this.defaults.duration = 1.5; 278 279 this.animOut ? this.out.opacity = 0 : ''; 280 this.animOut ? this.out.stagger = -0.01 : ''; 281 this.animOut ? this.out.ease = 'none' : ''; 282 } 283 284 if (this.anim === 'wordsFadeOn') { 285 286 this.defaults.opacity = 1; 287 288 this.defaults.stagger = 0.02; 289 this.defaults.duration = 3; 290 } 291 292 if (this.anim === 'linesFadeOn') { 293 294 this.defaults.opacity = 1; 295 296 this.defaults.stagger = 0.1; 297 this.defaults.duration = 2; 298 } 299 300 if ((this.anim === 'charsScaleUp') || (this.anim === 'charsScaleDown')) { 301 this.from.scaleY = 0 302 303 this.defaults.scaleY = 1 304 this.defaults.stagger = 0.05; 305 this.defaults.duration = 2; 306 } 307 308 if (this.anim === 'charsRotateIn') { 309 310 this.from.rotateX = -90 311 312 this.defaults.rotateX = 0; 313 314 this.defaults.stagger = 0.03; 315 this.defaults.duration = 2; 316 317 this.animOut ? this.out.rotateX = 90 : ''; 318 319 } 320 321 if (this.anim === 'charsFlipUp') { 322 323 this.from.x = -50 324 this.from.yPercent = 50 325 this.from.rotateY = 180 326 this.from.opacity = 0 327 328 this.defaults.x = 0 329 this.defaults.yPercent = 0 330 this.defaults.rotateY = 0 331 this.defaults.opacity = 1 332 333 this.defaults.stagger = -0.05; 334 this.defaults.duration = 1; 335 } 336 337 if (this.anim === 'charsFlipDown') { 338 339 this.from.x = 50 340 this.from.yPercent = -50 341 this.from.rotateY = -180 342 this.from.opacity = 0 343 344 this.defaults.x = 0 345 this.defaults.yPercent = 0 346 this.defaults.rotateY = 0 347 this.defaults.opacity = 1 348 349 this.defaults.stagger = 0.05; 350 this.defaults.duration = 1; 351 } 352 353 if (this.anim === 'linesMask') { 354 355 var elements = this.DOM.el.querySelectorAll('.anim_line'); 356
357 elements.forEach(function(element) { 358 var span = element.querySelector('span'); 359 var clone = span.cloneNode(true); 360 clone.classList.add('clone'); 361 element.appendChild(clone); 362 }); 363 364 this.from.width = '0%'; 365 366 this.defaults.width = '100%'; 367 this.defaults.stagger = 0.2; 368 this.defaults.duration = 2; 369 370 if (this.scrub == true) { 371 this.defaults.ease = 'none'; 372 } 373 374 this.scroll.scrollTrigger.start = 'top 70%'; 375 this.scroll.scrollTrigger.end = 'bottom center'; 376 } 377 378 // 379 380 this.stagger == null ? this.stagger = this.defaults.stagger : ''; 381 this.delay == null ? this.delay = this.defaults.delay : ''; 382 this.duration == null ? this.duration = this.defaults.duration : ''; 383 384 this.options = Object.assign(this.defaults, options); 385 this.fromOptions = Object.assign(this.from, fromOptions); 386 this.scroll = Object.assign(this.scroll, scroll); 387 388 this.options.stagger = this.stagger; 389 this.options.delay = this.delay; 390 this.options.duration = this.duration; 391 392 this.scroll.scrollTrigger.trigger = this.DOM.el; 393 394 395 396 if (this.pin) { 397 398 this.scrub = true 399 this.scroll.scrollTrigger.scrub = 1; 400 401 if (this.pinTarget) { 402 403 this.scroll.scrollTrigger.pin = this.pinTarget; 404 this.scroll.scrollTrigger.trigger = this.pinTarget; 405 406 const element = document.querySelector(this.pinTarget); 407 408 element.style.cssText += 'transition-duration:0s'; 409 410 } else { 411 412 this.scroll.scrollTrigger.pin = true; 413 } 414 415 } 416 417 if ((this.scrub) && (!this.pin)) { 418 this.scroll.scrollTrigger.scrub = 1; 419 } 420 421 if (this.animOut) { 422 423 this.out.stagger = this.options.stagger; 424 this.out.duration = this.options.duration; 425 this.out = Object.assign(this.out, out); 426 } 427 428 this.render(); 429 430 } 431 432 render() { 433 434 this.tl = gsap.timeline(this.scroll) 435 this.tl.fromTo(this.target, this.fromOptions, this.options); 436 this.animOut == true ? this.tl.to(this.target, this.out) : ''; 437 438 this.tl.eventCallback("onStart", () => { 439 this.DOM.el.classList.add('anim_start') 440 }); 441 442 443 444 445 } 446}
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.