1class peImageAnimation { 2 3 constructor(DOM_el, options, fromOptions, scroll, out) { 4 5 this.DOM = { 6 el: null, 7 }; 8 9 this.DOM.el = DOM_el; 10 this.settings = this.DOM.el.dataset.settings; 11 12 const properties = this.settings.slice(1, -1).split(';'); 13 14 const settings = properties.reduce((acc, property) => { 15 const [key, value] = property.split('='); 16 acc[key] = parseValue(value); 17 return acc; 18 }, {}); 19 20 function parseValue(value) { 21 22 if (value === "true" || value === "false") { 23 return value === "true"; 24 } 25 26 const parsedNumber = parseFloat(value.replace(',', '.')); 27 if (!isNaN(parsedNumber)) { 28 return parsedNumber; 29 } 30 31 return value; 32 } 33 34 function parents(element, selector) { 35 const parentsArray = []; 36 let currentElement = element.parentElement; 37 38 while (currentElement !== null) { 39 if (currentElement.matches(selector)) { 40 parentsArray.push(currentElement); 41 } 42 currentElement = currentElement.parentElement; 43 } 44 45 return parentsArray; 46 } 47 48 this.stagger = settings.stagger; 49 this.duration = settings.duration; 50 this.delay = settings.delay; 51 this.scrub = settings.scrub; 52 this.pin = settings.pin; 53 this.pinTarget = settings.pinTarget; 54 this.animOut = settings.out; 55 this.target = this.DOM.el.classList.contains('anim-multiple') ? this.DOM.el.querySelectorAll('.inner--anim') : this.DOM.el; 56 57 this.startScale = settings.start_scale; 58 this.endScale = settings.end_scale; 59 this.innerScale = settings.inner_scale; 60 61 this.block_direction = settings.block_direction; 62 63 this.img = this.DOM.el.querySelector('img'); 64 65 66 // Animation Defaults 67 this.defaults = { 68 x: 0, 69 y: 0, 70 xPercent: 0, 71 yPercent: 0, 72 scale: 1, 73 opacity: 1, 74 duration: .75, 75 delay: 0, 76 stagger: 0, 77 ease: 'expo.out', 78 '--blWidth': '100%', 79 '--blHeight': '100%', 80 81 }; 82 83 // Animation start stages 84 this.from = { 85 yPercent: 0, 86 xPercent: 0, 87 x: 0, 88 y: 0, 89 '--blWidth': '100%', 90 '--blHeight': '100%', 91 } 92 93 // Scroll options 94 this.scroll = { 95 scrollTrigger: { 96 trigger: null, 97 scrub: null, 98 pin: null, 99 start: 'top bottom', 100 end: 'bottom center', 101 onEnter: () => { 102 this.DOM.el.classList.add('viewport-enter'); 103 } 104 } 105 } 106 107 this.out = { 108 yPercent: null, 109 stagger: null, 110 duration: null, 111 ease: 'expo.in', 112 delay: 0 113 } 114 115 116 this.id = Math.random().toString(16).slice(2); 117 118 this.scroll.scrollTrigger.start = settings.item_ref_start + ' ' + settings.window_ref_start; 119 this.scroll.scrollTrigger.end = settings.item_ref_end + ' ' + settings.window_ref_end; 120 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 129 this.anim = this.DOM.el.dataset.animation; 130 131 132 // Defaults for animations 133 134 if (this.anim === 'scale') { 135 136 this.from.scale = this.startScale; 137 this.defaults.scale = this.endScale; 138 139 this.defaults.duration = 0.75; 140 } 141 142 if (this.anim === 'block') { 143 144 this.defaults['--blWidth'] = this.block_direction === 'left' || this.block_direction === 'right' ? '0%' : '100%'; 145 this.defaults['--blHeight'] = this.block_direction === 'up' || this.block_direction === 'down' ? '0%' : '100%'; 146 147 } 148 149 if (this.anim === 'mask') { 150 151 152 153 var masks = { 154 square: { 155 start: settings.square_start, 156 end: settings.square_end, 157 }, 158 circle: { 159 start: settings.circle_start, 160 end: settings.circle_end, 161 }, 162 triangle: { 163 start: 'polygon(50% 0%, 50% 0%, 100% 100%, 0% 100%)', 164 end: 'polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%)', 165 }, 166 rhombus: { 167 start: 'polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%)', 168 end: 'polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%)', 169 }, 170 hexagon: { 171 start: 'polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%)', 172 end: 'polygon(50% 0%, 100% 0%, 100% 100%, 50% 100%, 0% 100%, 0% 0%)', 173 }, 174 left_arrow: { 175 start: 'polygon(40% 0%, 40% 20%, 100% 20%, 100% 80%, 40% 80%, 40% 100%, 0% 50%)', 176 end: 'polygon(0% 0%, 40% 0%, 100% 0%, 100% 100%, 40% 100%, 0% 100%, 0% 50%)', 177 }, 178 right_arrow: { 179 start: 'polygon(0% 20%, 60% 20%, 60% 0%, 100% 50%, 60% 100%, 60% 80%, 0% 80%)', 180 end: ' polygon(0% 0%, 60% 0%, 100% 0%, 100% 50%, 100% 100%, 60% 100%, 0% 100%)', 181 }, 182 left_chevron: { 183 start: 'polygon(100% 0%, 75% 50%, 100% 100%, 25% 100%, 0% 50%, 25% 0%)', 184 end: 'polygon(100% 0%, 100% 50%, 100% 100%, 0% 100%, 0% 50%, 0% 0%)', 185 }, 186 right_chevron: { 187 start: 'polygon(75% 0%, 100% 50%, 75% 100%, 0% 100%, 25% 50%, 0% 0%)', 188 end: 'polygon(100% 0%, 100% 50%, 100% 100%, 0% 100%, 0% 50%, 0% 0%)', 189 }, 190 star: { 191 start: 'polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%)', 192 end: 'polygon(50% 0%, 100% 0%, 100% 34%, 100% 59%, 100% 100%, 50% 100%, 0% 100%, 0% 63%, 0% 36%, 0% 0%)', 193 }, 194 close: { 195 start: 'polygon(20% 0%, 0% 20%, 30% 50%, 0% 80%, 20% 100%, 50% 70%, 80% 100%, 100% 80%, 70% 50%, 100% 20%, 80% 0%, 50% 30%)', 196 end: 'polygon(0% 0%, 0% 19%, 0% 54%, 0% 75%, 0% 100%, 46% 100%, 100% 100%, 100% 80%, 100% 50%, 100% 21%, 100% 0%, 47% 0%)', 197 } 198 }; 199 200 201 this.from.clipPath = (masks[settings.mask_start]['start']); 202 this.defaults.clipPath = (masks[settings.mask_start]['end']); 203 204 } 205 206 this.stagger == null ? this.stagger = this.defaults.stagger : ''; 207 this.delay == null ? this.delay = this.defaults.delay : ''; 208 this.duration == null ? this.duration = this.defaults.duration : ''; 209 210 this.options = Object.assign(this.defaults, options); 211 this.fromOptions = Object.assign(this.from, fromOptions); 212 this.scroll = Object.assign(this.scroll, scroll); 213 214 this.options.stagger = this.stagger; 215 this.options.delay = this.delay; 216 this.options.duration = this.duration; 217
218 this.scroll.scrollTrigger.trigger = this.DOM.el; 219 220 if (this.pin) { 221 222 this.scrub = true 223 this.scroll.scrollTrigger.scrub = 1; 224 225 parents(this.DOM.el, '.elementor-widget-container')[0].classList.add('anim--parent'); 226 227 if (this.pinTarget) { 228 229 this.scroll.scrollTrigger.pin = this.pinTarget; 230 this.scroll.scrollTrigger.trigger = this.pinTarget; 231 232 const element = document.querySelector(this.pinTarget); 233 234 element.style.cssText += 'transition-duration:0s'; 235 236 } else { 237 238 this.scroll.scrollTrigger.pin = parents(this.DOM.el, '.elementor-element-1cbf11e'); 239 } 240 241 } 242 243 if ((this.scrub) && (!this.pin)) { 244 this.scroll.scrollTrigger.scrub = 1; 245 } 246 247 this.scrub ? this.defaults.ease = 'none' : ''; 248 249 if (this.animOut) { 250 this.out.stagger = this.options.stagger; 251 this.out.duration = this.options.duration; 252 this.out = Object.assign(this.out, out); 253 } 254 255 this.render(); 256 257 } 258 259 render() { 260 261 262 this.tl = gsap.timeline(this.scroll) 263 this.tl.fromTo(this.target, this.fromOptions, this.options); 264 265 if (this.innerScale) { 266 267 this.tl.fromTo(this.img, { 268 scale: 1.25, 269 duration: this.duration, 270 delay: this.delay, 271 ease: this.options.ease, 272 273 }, { 274 scale: 1 275 }, this.delay) 276 277 } 278 279 this.animOut == true ? this.tl.to(this.target, this.out) : ''; 280 281 this.tl.eventCallback("onStart", () => { 282 this.DOM.el.classList.add('anim_start') 283 }); 284 285 286 } 287 288};
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.