Untitled
unknown
plain_text
2 months ago
6.0 kB
2
Indexable
<script> const backgroundImageEmpty = "linear-gradient(90deg, rgba(141, 93, 217, 0), rgba(138, 185, 255, 0))"; const backgroundImageFill = "linear-gradient(90deg,rgba(141, 93, 217, 1),rgba(138, 185, 255, 1))"; // Match for screens wider than 768px mm.add("(min-width: 768px)", () => { let svg = document.querySelector(".stage_path-desktop-on svg"); let path = svg.querySelector("path"); let pathLength = path.getTotalLength(); gsap.set(path, { strokeDasharray: pathLength, }); const stage_tl = gsap.timeline({ scrollTrigger: { trigger: ".section_campaign", start: "top 0%", end: "bottom 0%", markers: false, pin: true, // scrub: 1, scrub: 0.5, ease: "power1.inOut", }, }); stage_tl.fromTo( path, { display: "none", strokeDashoffset: pathLength, }, { display: "block", strokeDashoffset: 0, duration: 10, ease: "none", }, "a" ); // common : stage_tl.set( ".stage_item .stage_button", { backgroundImage: backgroundImageEmpty, opacity: "0.24", }, "a" ); // Define Step 1 label stage_tl.addLabel("step1", "a"); stage_tl .to( ".stage_item-reach .stage_button", { backgroundImage: backgroundImageFill, opacity: "1", delay: 0.5, }, "step1" ) .to( ".stage_item-reach .stage_button", { backgroundImage: backgroundImageEmpty, opacity: "1", delay: 1, }, ">0" ) .to( ".stage_item-attention .stage_button", { backgroundImage: backgroundImageFill, opacity: "1", delay: 0, }, ">0" ) .to( ".stage_item-attention .stage_button", { backgroundImage: backgroundImageEmpty, opacity: "1", delay: 1, }, ">0" ) .to( ".stage_item-engagement .stage_button", { backgroundImage: backgroundImageFill, opacity: "1", delay: 0, }, ">0" ) .to( ".stage_item-engagement .stage_button", { backgroundImage: backgroundImageEmpty, opacity: "1", delay: 1, }, ">0" ) .to( ".stage_item-awareness .stage_button", { backgroundImage: backgroundImageFill, opacity: "1", delay: 0, }, ">0" ) .to( ".stage_item-awareness .stage_button", { backgroundImage: backgroundImageEmpty, opacity: "1", delay: 1, }, ">0" ) .to( ".stage_item-impact .stage_button", { backgroundImage: backgroundImageFill, opacity: "1", delay: 0, }, ">0" ); return () => { // Add clean-up logic here }; }); // Match for screens narrower than 768px mm.add("(max-width: 767px)", () => { let svg = document.querySelector(".stage_path-mobile-on svg"); let path = svg.querySelector("path"); let pathLength = path.getTotalLength(); gsap.set(path, { strokeDasharray: pathLength, }); const stage_tl = gsap.timeline({ scrollTrigger: { trigger: ".section_campaign .stage_grid", start: "top 50%", end: "bottom 90%", markers: false, // scrub: 1, scrub: 0.5, ease: "power1.inOut", }, }); stage_tl.fromTo( path, { display: "none", strokeDashoffset: pathLength, }, { display: "block", strokeDashoffset: 0, duration: 10, ease: "none", }, "a" ); // common : stage_tl.set( ".stage_item .stage_button", { backgroundImage: backgroundImageEmpty, opacity: "0.24", }, "a" ); // Define Step 1 label stage_tl.addLabel("step1", "a"); stage_tl .to( ".stage_item-reach .stage_button", { backgroundImage: backgroundImageFill, opacity: "1", delay: 0.5, }, "step1" ) .to( ".stage_item-reach .stage_button", { backgroundImage: backgroundImageEmpty, opacity: "1", delay: 1, }, ">0" ) .to( ".stage_item-attention .stage_button", { backgroundImage: backgroundImageFill, opacity: "1", delay: 0, }, ">0" ) .to( ".stage_item-attention .stage_button", { backgroundImage: backgroundImageEmpty, opacity: "1", delay: 1, }, ">0" ) .to( ".stage_item-engagement .stage_button", { backgroundImage: backgroundImageFill, opacity: "1", delay: 0, }, ">0" ) .to( ".stage_item-engagement .stage_button", { backgroundImage: backgroundImageEmpty, opacity: "1", delay: 1, }, ">0" ) .to( ".stage_item-awareness .stage_button", { backgroundImage: backgroundImageFill, opacity: "1", delay: 0, }, ">0" ) .to( ".stage_item-awareness .stage_button", { backgroundImage: backgroundImageEmpty, opacity: "1", delay: 1, }, ">0" ) .to( ".stage_item-impact .stage_button", { backgroundImage: backgroundImageFill, opacity: "1", delay: 0, }, ">0" ); return () => { // Add clean-up logic here }; }); </script>
Editor is loading...
Leave a Comment