1gsap.registerPlugin(ScrollTrigger, DrawSVGPlugin, MotionPathPlugin); 2function resize() { 3 if (window.innerWidth > 964) { 4 var action = gsap 5 .timeline({ 6 defaults: { duration: 1, ease: "none" }, 7 paused: true, 8 scrollTrigger: { 9 trigger: ".timeline--section", 10 scrub: true, 11 start: "top center", 12 end: "bottom center", 13 once: true, 14 onUpdate: ({ progress }) => { 15 action.progress() < progress 16 ? action.progress(progress) 17 : action.progress(); 18 }, 19 }, 20 }) 21 22 .fromTo( 23 "#Path_6855", 24 { drawSVG: "100% 100%" }, 25 { drawSVG: "0% 100%" }, 26 0 27 ); 28 29 // small line animation 1 30 var action2 = gsap 31 .timeline({ 32 defaults: { duration: 0.5, ease: "none" }, 33 scrollTrigger: { 34 trigger: "#Path_6856", 35 scrub: 0.5, 36 start: "-=40px center", 37 end: "bottom center", // new 38 endTrigger: "#Path_6856", 39 once: true, 40 }, 41 }) 42 43 .fromTo( 44 "#Path_6856", 45 { drawSVG: "100% 100%" }, 46 { drawSVG: "0% 100%" }, 47 0 48 ); 49 // circle animation 1 50 var action3 = gsap 51 .timeline({ 52 defaults: { duration: 0.5, ease: "none" }, 53 scrollTrigger: { 54 trigger: "#Ellipse_91", 55 scrub: 0, 56 start: "+=10px center", 57 end: "bottom center", // new 58 endTrigger: "#Ellipse_91", 59 once: true, 60 }, 61 }) 62 .fromTo("#Ellipse_91", { opacity: 0 }, { opacity: 1 }, 0); 63 // section animation 1 64 // var content1 = gsap 65 // .timeline({ 66 // defaults: { duration: 3, ease: "circ.out" }, 67 // scrollTrigger: { 68 // trigger: "#Ellipse_91", 69 // scrub: 0.3, 70 // start: "+=10px center", 71 // end: "bottom center", // new 72 // endTrigger: "#Ellipse_91", 73 // once: true, 74 // }, 75 // }) 76 // .fromTo( 77 // ".first_section .section-inner", 78 // { transform: "translateX(200px)", opacity: 0 }, 79 // { transform: "translateX(0)", opacity: 1 }, 80 // 0 81 // ) 82 // .fromTo( 83 // ".first_section .image_side", 84 // { transform: "translateX(200px)", opacity: 0 }, 85 // { transform: "translateX(0)", opacity: 1 }, 86 // 0 87 // ); 88 89 // small line animation 2 90 var action3 = gsap 91 .timeline({ 92 defaults: { duration: 0.5, ease: "none" }, 93 scrollTrigger: { 94 trigger: "#Path_6857", 95 scrub: 0.5, 96 start: "50px center", 97 end: "bottom center", // new 98 endTrigger: "#Path_6857", 99 once: true, 100 }, 101 }) 102 103 .fromTo( 104 "#Path_6857", 105 { drawSVG: "100% 100%" }, 106 { drawSVG: "0% 100%" }, 107 0 108 ); 109 110 // circle animation 2 111 var action3 = gsap 112 .timeline({ 113 defaults: { duration: 0.5, ease: "none" }, 114 scrollTrigger: { 115 trigger: "#Ellipse_92", 116 scrub: 0.2, 117 start: "+=25px center", 118 end: "bottom center", // new 119 endTrigger: "#Ellipse_92", 120 once: true, 121 }, 122 }) 123 .fromTo("#Ellipse_92", { opacity: 0 }, { opacity: 1 }, 0); 124 125 // section animation 2 126 // var content1 = gsap 127 // .timeline({ 128 // defaults: { duration: 3, ease: "circ.out" }, 129 // scrollTrigger: { 130 // trigger: "#Ellipse_92", 131 // scrub: 0.3, 132 // start: "+=25px center", 133 // end: "bottom center", // new 134 // endTrigger: "#Ellipse_92", 135 // once: true, 136 // }, 137 // }) 138 // .fromTo( 139 // ".second_section .section-inner", 140 // { transform: "translateX(200px)", opacity: 0 }, 141 // { transform: "translateX(0)", opacity: 1 }, 142 // 0 143 // ) 144 // .fromTo( 145 // ".second_section .image_side", 146 // { transform: "translateX(-200px)", opacity: 0 }, 147 // { transform: "translateX(0)", opacity: 1 }, 148 // 0 149 // ); 150 151 // third section 152 // small line animation 3 153 var action3 = gsap
154 .timeline({ 155 defaults: { duration: 0.5, ease: "none" }, 156 scrollTrigger: { 157 trigger: "#Path_6858", 158 scrub: 0.5, 159 start: "120px center", 160 end: "bottom center", // new 161 endTrigger: "#Path_6858", 162 delay: 0.5, 163 once: true, 164 }, 165 }) 166 167 .fromTo( 168 "#Path_6858", 169 { drawSVG: "100% 100%" }, 170 { drawSVG: "0% 100%", duration: 0.1 }, 171 0 172 ); 173 174 // circle animation 3 175 var action3 = gsap 176 .timeline({ 177 defaults: { duration: 0.5, ease: "none" }, 178 scrollTrigger: { 179 trigger: "#Ellipse_93", 180 scrub: 0.2, 181 start: "100px center", 182 end: "bottom center", // new 183 once: true, 184 }, 185 }) 186 .fromTo("#Ellipse_93", { opacity: 0 }, { opacity: 1 }, 0); 187 188 // section animation 3 189 // var content1 = gsap 190 // .timeline({ 191 // defaults: { duration: 3, ease: "circ.out" }, 192 // scrollTrigger: { 193 // trigger: "#Ellipse_93", 194 // scrub: 0.3, 195 // start: "100px center", 196 // end: "bottom center", // new 197 // once: true, 198 // }, 199 // }) 200 // .fromTo( 201 // ".third_section .section-inner", 202 // { transform: "translateX(200px)", opacity: 0 }, 203 // { transform: "translateX(0)", opacity: 1 }, 204 // 0 205 // ) 206 // .fromTo( 207 // ".third_section .image_side", 208 // { transform: "translateX(200px)", opacity: 0 }, 209 // { transform: "translateX(0)", opacity: 1 }, 210 // 0 211 // ); 212 } else { 213 // first section animation small screen 214 // var sm_action1 = gsap 215 // .timeline({ 216 // defaults: { duration: 0.8, ease: "power2.out" }, 217 // scrollTrigger: { 218 // trigger: ".first_section", 219 // start: "150px center", 220 // end: "bottom center", // new 221 // once: true, 222 // }, 223 // }) 224 // .fromTo( 225 // ".first_section .section-inner", 226 // { opacity: 0, transform: "translateX(-200px)" }, 227 // { opacity: 1, transform: "translateX(0px)" }, 228 // 0 229 // ) 230 // .fromTo( 231 // ".first_section .image_side", 232 // { opacity: 0, transform: "translateX(200px)" }, 233 // { opacity: 1, transform: "translateX(0px)" }, 234 // 0 235 // ); 236 // // 2nd section animation small screen 237 // var sm_action2 = gsap 238 // .timeline({ 239 // defaults: { duration: 0.8, ease: "power2.out" }, 240 // scrollTrigger: { 241 // trigger: ".second_section", 242 // start: "150px center", 243 // end: "bottom center", // new 244 // once: true, 245 // }, 246 // }) 247 // .fromTo( 248 // ".second_section .section-inner", 249 // { opacity: 0, transform: "translateX(200px)" }, 250 // { opacity: 1, transform: "translateX(0px)" }, 251 // 0 252 // ) 253 // .fromTo( 254 // ".second_section .image_side", 255 // { opacity: 0, transform: "translateX(-200px)" }, 256 // { opacity: 1, transform: "translateX(0px)" }, 257 // 0 258 // ); 259 // // 3rd section animation small screen 260 // var sm_action3 = gsap 261 // .timeline({ 262 // defaults: { duration: 0.8, ease: "power2.out" }, 263 // scrollTrigger: { 264 // trigger: ".third_section", 265 // start: "150px center", 266 // end: "bottom center", // new 267 // once: true, 268 // }, 269 // }) 270 // .fromTo( 271 // ".third_section .section-inner", 272 // { opacity: 0, transform: "translateX(-200px)" }, 273 // { opacity: 1, transform: "translateX(0px)" }, 274 // 0 275 // ) 276 // .fromTo( 277 // ".third_section .image_side", 278 // { opacity: 0, transform: "translateX(200px)" }, 279 // { opacity: 1, transform: "translateX(0px)" }, 280 // 0 281 // ); 282 // // line animation small screen 283 // var line_anim1 = gsap 284 // .timeline({ 285 // defaults: { duration: 1, ease: "none" }, 286 // scrollTrigger: { 287 // trigger: ".first_section line", 288 // start: "-120px center", 289 // end: "bottom center", // new 290 // once: true, 291 // }, 292 // }) 293 // .fromTo( 294 // ".first_section line", 295 // { drawSVG: "100% 100%", delay: 0.5 },
296 // { drawSVG: "0% 100%", delay: 0.5 }, 297 // 0 298 // ) 299 // .fromTo( 300 // ".first_section circle", 301 // { opacity: 0 }, 302 // { opacity: 1, delay: 1.5, duration: 0.2 }, 303 // 0 304 // ); 305 // // line 2 small 306 // var line_anim2 = gsap 307 // .timeline({ 308 // defaults: { duration: 1, ease: "none" }, 309 // scrollTrigger: { 310 // trigger: ".second_section line", 311 // start: "-120px center", 312 // end: "bottom center", // new 313 // once: true, 314 // }, 315 // }) 316 // .fromTo( 317 // ".second_section line", 318 // { drawSVG: "100% 100%" }, 319 // { drawSVG: "0% 100%" }, 320 // 0 321 // ) 322 // .fromTo( 323 // ".second_section circle", 324 // { opacity: 0 }, 325 // { opacity: 1, delay: 1, duration: 0.2 }, 326 // 0 327 // ); 328 } 329} 330resize(); 331window.addEventListener("resize", function () { 332 resize(); 333});
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.