1

I'm trying to fix my animation and run it when the user sees sections with that animation but I'm stuck and can't figure it out. I'm trying to use gsap or luxy.js but I can't find a solution. I'm also trying to keep the user scrolling "in place" until the animation is complete and then they can move down the page.

 <section style="height: 150vh;">
            <div id="svg-container2">
            <svg viewBox="0 0 1440 320" style="transform: scaleX(-1)">
            <path id="my-path-2" class="path-2" d="M0,256L48,229.3C96,203,192,149,288,133.3C384,117,480,139,576,176C672,213,768,267,864,266.7C960,267,1056,213,1152,181.3C1248,149,1344,139,1392,133.3L1440,128" />
          </svg>
          </div>  
            <svg viewBox="0 0 1440 320">
                <path id="my-path" class="path-" d="M0,256L48,229.3C96,203,192,149,288,133.3C384,117,480,139,576,176C672,213,768,267,864,266.7C960,267,1056,213,1152,181.3C1248,149,1344,139,1392,133.3L1440,128" />
              </svg>
        </section>          

svg {
    width: 100%;
    height: 30%;
    z-index: -1;
  }
  path {
    stroke: #0099ff;
    stroke-width: 2;
    stroke-dasharray: 1000;
    stroke-dashoffset: 1000;
    fill: none;
  }

const path1 = document.querySelector("#my-path");
const pathLength1 = path1.getTotalLength();
path1.style.strokeDasharray = pathLength1;
path1.style.strokeDashoffset = pathLength1;

const path2 = document.querySelector("#my-path-2");
const pathLength2 = path2.getTotalLength();
path2.style.strokeDasharray = pathLength2;
path2.style.strokeDashoffset = pathLength2;

window.addEventListener("scroll", () => {
  const scrollTop = window.pageYOffset;
  const scrollHeight = document.body.scrollHeight - window.innerHeight;
  const scrollFraction = scrollTop / scrollHeight;

  const drawLength1 = pathLength1 * scrollFraction;
  path1.style.strokeDashoffset = pathLength1 - drawLength1;

  let drawLength2 = pathLength2 * scrollFraction;
  let offset2 = pathLength2 - drawLength2;
  if (scrollFraction === 1) {
    offset2 = pathLength2 - 1;
  }
  path2.style.strokeDasharray = pathLength2;
  path2.style.strokeDashoffset = offset2;

  if (drawLength2 <= 0) {
    path2.style.strokeDasharray = pathLength2;
    path2.style.strokeDashoffset = pathLength2;
  }
});

I hope someone can do this and help. Thanks to everyone who tries! <3

Agent
  • 21
  • 4
  • 1
    Some overview of the general "is element in viewport" logic https://www.javascripttutorial.net/dom/css/check-if-an-element-is-visible-in-the-viewport/ you can likely adjust this to your needs? That said, I'd avoid locking the user's screen scrolling while your animation runs... the user should remain in control. or this answer (same general concept: https://stackoverflow.com/a/7557433/6144) – scunliffe Apr 14 '23 at 21:13
  • 3
    Just some general comments... In modern development, you can and probably should use the [Intersection Observer API](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API) for detecting when something is on the screen, rather than homebrewing your own solution. Your animation implementation is also very unique - I'm not entirely sure what effect you're going for at the end of the day, but generally I might recommend using [CSS animations](https://www.w3schools.com/css/css3_animations.asp) for this type of thing. – Jake Apr 14 '23 at 21:17
  • You can also use the [Web Animations API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API) to start and stop your animation at will (such as when it scrolls onto the screen). As for preventing scrolling during the animation, as scunliffe said, I wouldn't recommend it, but you can do this sort of thing by using `event.preventDefault()` in your scroll event listener. Most likely you'll want to wrap this in a conditional that expires after a few seconds, so that the user can resume scrolling. You can accomplish this sort of thing using `setTimeout`. – Jake Apr 14 '23 at 21:19
  • For what it's worth, I made this [JSFiddle](https://jsfiddle.net/e0x1873v/2/) to try to demonstrate. However, it's giving me a hard time in both StackSnippets and in Chrome, but seems to work fine in Firefox. Presumably it's a small bug somewhere, but I am out of time to debug, so make of it what you will. – Jake Apr 14 '23 at 22:04

0 Answers0