1// use search function to find section you're working in I.E. .spot01 2gsap.registerPlugin(ScrollTrigger); 3 4// override global defaults 5gsap.config({ force3D: true }); 6 7gsap.defaults({ 8 ease: "power4.inOut", 9 duration: 1, 10}); 11 12const funEase = "back.inOut(3)"; 13 14ScrollTrigger.defaults({ 15 toggleActions: "play none none reverse", 16 start: "top 75%", 17}); 18 19// animations 20document.addEventListener("DOMContentLoaded", () => { 21 gsap.matchMedia().add("(min-width:1300px)", () => { 22 // slideshow & masthead 23 (() => { 24 const $slideshow = $("#slideshow"); 25 if (!$slideshow.length) return; 26 const $welcomevid = $("#welcomevid"); 27 const $mastheadLogo = $("#masthead #logo"); 28 const $hdmod = $("#hd .mod"); 29 const $mainnav = $("#main-nav"); 30 31 gsap 32 .timeline({ 33 scrollTrigger: { 34 trigger: $slideshow, 35 }, 36 }) 37 // video fades in 38 .from($welcomevid, { autoAlpha: 0 }) 39 // nav and hd mod slide down with stagger, overlapping video 40 .from( 41 [$mainnav, $hdmod], 42 { 43 autoAlpha: 0, 44 yPercent: -100, 45 stagger: 0.33, 46 }, 47 "-=.6", 48 ) 49 // logo slides up, overlapping nav 50 .from( 51 $mastheadLogo, 52 { 53 autoAlpha: 0, 54 yPercent: 100, 55 }, 56 "-=.6", 57 ); 58 })(); 59 60 // spot01 61 (() => { 62 const $section = $(".spot01"); 63 if (!$section.length) return; 64 const $spot01ModChildren = $section.find(".mod").children(); 65 const $decoration = $section.find(".decoration"); 66 const $gradientBg = $section.find(".gradient-bg"); 67 const $largeText = $section.find(".decor-text"); 68 69 gsap 70 .timeline({ 71 scrollTrigger: { 72 trigger: $section, 73 }, 74 }) 75 // gradient background slides in from right and fades in 76 .from($gradientBg, { 77 opacity: 0, 78 xPercent: 100, 79 }) 80 // decoration slides up, overlapping gradient bg 81 .from( 82 $decoration, 83 { 84 opacity: 0, 85 yPercent: 100, 86 }, 87 "-=.6", 88 ) 89 // mod children slide up with stagger 90 .from($spot01ModChildren, { 91 opacity: 0, 92 yPercent: 100, 93 stagger: 0.33, 94 ease: funEase, 95 }) 96 .from($largeText, { 97 y: 200, 98 }); 99 })(); 100 101 // spot02 102 (() => { 103 const $section = $(".spot02"); 104 if (!$section.length) return; 105 const $decoration = $section.find(".decoration"); 106 const $imgs = $decoration.children(); 107 const $sectionHeading = $section.find("h2.topic"); 108 const $sectionChecklistItems = $section.find("a"); 109 110 gsap 111 .timeline({ 112 scrollTrigger: { 113 trigger: $section, 114 start: "top 50%", 115 }, 116 }) 117 .from($decoration, { 118 rotate: -90, 119 }) 120 // decoration images scale down to natural size with stagger 121 .from( 122 $imgs.find("img"), 123 { 124 scale: 1.2, 125 stagger: 0.66, 126 }, 127 "-=.6", 128 ) 129 // overlays fade out to reveal images, same time as scale 130 .to( 131 $imgs.find(".gsap-overlay"), 132 { 133 opacity: 0, 134 stagger: 0.66, 135 }, 136 "<", 137 ) 138 // heading words slide up with stagger, overlapping overlay fade 139 .from( 140 $sectionHeading.find(".word"), 141 { 142 yPercent: 100, 143 ease: funEase, 144 opacity: 0, 145 stagger: 0.1, 146 }, 147 "-=1.2", 148 ) 149 // checklist item numbers scale and rotate into place with stagger 150 .from($sectionChecklistItems.find(".num"), { 151 ease: funEase, 152 scale: 0, 153 rotate: 180, 154 opacity: 0, 155 stagger: 0.33, 156 }) 157 // cta text slides up with stagger, same time as numbers 158 .from( 159 $sectionChecklistItems.find(".cta"), 160 { 161 ease: funEase, 162 yPercent: 50, 163 opacity: 0, 164 stagger: 0.33, 165 }, 166 "<", 167 ); 168 })(); 169 170 // bd 171 (() => { 172 const $section = $(".home #bd"); 173 if (!$section.length) return; 174 const $contentHeader = $section.find("#content header"); 175 const $contentText = $section.find(".content-text"); 176 const $decoration = $section.find(".decoration"); 177 const $decorationImg = $decoration.find("img"); 178 const $decorationOverlay = $section.find(".gsap-overlay"); 179 180 gsap 181 .timeline({ 182 scrollTrigger: { 183 trigger: $section, 184 start: "top 75%", 185 }, 186 }) 187 // header slides up and fades in 188 .from($contentHeader, { 189 autoAlpha: 0, 190 y: 100, 191 ease: funEase, 192 }) 193 // decoration slides in from right, overlapping header 194 .from( 195 $decoration, 196 { 197 opacity: 0, 198 xPercent: 100, 199 }, 200 "-=.6", 201 ) 202 // decoration image scales down to natural size, same time as decoration 203 .from( 204 $decorationImg, 205 { 206 scale: 1.2, 207 duration: 2, 208 }, 209 "<", 210 )
211 // overlay wipes out to the left, revealing the image beneath 212 .to( 213 $decorationOverlay, 214 { 215 opacity: 0, 216 duration: 2, 217 }, 218 "<", 219 ) 220 // content text slides up, overlapping overlay wipe 221 .from( 222 $contentText, 223 { 224 autoAlpha: 0, 225 y: 100, 226 }, 227 "-=.6", 228 ); 229 })(); 230 231 // spot03 232 (() => { 233 const $section = $(".spot03"); 234 if (!$section.length) return; 235 const $sectionHeading = $section.find("h2.topic"); 236 const $sectionCounter = $sectionHeading.find(".count-up"); 237 const $sectionTestimonials = $section.find(".container"); 238 const $gradientBg = $section.find(".gradient-bg"); 239 240 const counterObj = { value: 1 }; 241 242 gsap 243 .timeline({ 244 scrollTrigger: { 245 trigger: $section, 246 }, 247 }) 248 // gradient background slides in from right and fades in 249 .from($gradientBg, { 250 opacity: 0, 251 xPercent: 100, 252 }) 253 // heading slides up and fades in, overlapping gradient bg 254 .from( 255 $sectionHeading, 256 { 257 autoAlpha: 0, 258 yPercent: 100, 259 ease: funEase, 260 }, 261 "-=.6", 262 ) 263 // counter counts up from 1 to target value, same time as heading 264 .to( 265 counterObj, 266 { 267 value: $sectionCounter.data("num"), 268 duration: 2, 269 ease: "power3.out", 270 onUpdate: function () { 271 $sectionCounter.text(Math.round(counterObj.value)); 272 }, 273 }, 274 "<", 275 ) 276 // testimonials fade up, overlapping counter 277 .from( 278 $sectionTestimonials, 279 { 280 autoAlpha: 0, 281 y: 50, 282 }, 283 "-=1.2", 284 ); 285 })(); 286 287 // sidebar 288 (() => { 289 const $sidebar = $("#sidebar"); 290 if (!$sidebar[0]) return; 291 292 gsap 293 .timeline({ 294 scrollTrigger: { 295 trigger: $sidebar, 296 start: "top 90%", 297 }, 298 }) 299 // sidebar slides in from right and fades in on scroll 300 .fromTo($sidebar, { x: "100%", autoAlpha: 0 }, { x: 0, autoAlpha: 1 }); 301 })(); 302 303 // subnav lax 304 (() => { 305 const $subnav = $("#subnav"); 306 if (!$subnav[0]) return; 307 308 // subnav background moves upward on scroll (parallax effect) 309 gsap.fromTo( 310 $subnav, 311 { 312 backgroundPositionY: "0%", 313 }, 314 { 315 backgroundPositionY: "-100%", 316 ease: "none", 317 scrollTrigger: { 318 trigger: $subnav, 319 scrub: true, 320 start: "top 0%", 321 }, 322 }, 323 ); 324 })(); 325 326 // ft 327 (() => { 328 const $ft = $("#ft"); 329 const $ftMod = $ft.find(".mod"); 330 const $ftMaps = $ft.find(".map"); 331 const $ftMapMarker = $ft.find(".marker"); 332 333 const ftTimeline = gsap.timeline({ 334 scrollTrigger: { 335 trigger: $ft, 336 start: "top 90%", 337 }, 338 }); 339 340 ftTimeline 341 // maps slide in from opposite sides simultaneously 342 .from($ftMaps.eq(0), { x: -100, opacity: 0, clearProps: true }) 343 .from($ftMaps.eq(1), { x: 100, opacity: 0, clearProps: true }, "<") 344 // mod slides up, same time as maps 345 .from( 346 $ftMod, 347 { y: 100, opacity: 0, clearProps: true, stagger: 0.3 }, 348 "<", 349 ) 350 // map marker fades in last 351 .from($ftMapMarker, { opacity: 0, clearProps: true }); 352 })(); 353 354 // resize reset 355 return () => { 356 const $spot03Counter = $(".spot03 h2.topic [data-num]"); 357 // Reset counter to final value on resize 358 if ($spot03Counter[0]) { 359 $spot03Counter.text($spot03Counter.data("num")); 360 } 361 }; 362 }); 363});
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.