如何转换 svg animation 以在滚动上工作？

Question

I created 4 animations which 2 are squares which moves following the path. And 2 are lines undrawing.

I was wondering if I could transform these animations to be on scroll instead of time duration like bellow?

I try to find but I don't think that these 4 animations could be on scroll.

Any idea in comment would be helpfull.

 // Example class component class Svg extends React.Component { render() { return ( <div> <svg viewBox="0 0 1200 700" width="100%" height="700" xmlSpace="preserve"> <defs> <filter x="-50%" y="-50%" width="200%" height="200%" filterUnits="objectBoundingBox" id="shadow-filter"> <feOffset dx="0" dy="20" in="SourceAlpha" result="shadowOffsetOuter1" /> <feGaussianBlur stdDeviation="10" in="shadowOffsetOuter1" result="shadowBlurOuter1" /> <feColorMatrix values="0.1 0 0 0 0 0 0.2 0 0 0 0 0 0.1 0 0 0 0 0 0.1 0" in="shadowBlurOuter1" type="matrix" result="shadowMatrixOuter1" /> <feMerge> <feMergeNode in="shadowMatrixOuter1" /> <feMergeNode in="SourceGraphic" /> </feMerge> </filter> </defs> <g> <path d="M544.9,635c-1.2-172.5-2.3-345-3.5-517.5c-0.3-7.8-2.6-21.2-14.1-32.6c-11.7-11.5-28.5-20-57.5-20 c-18.9,0-78.4,0-97.3,0c-64.3,0-138,0-202.4,0h-4.1" id="Clasque_3" stroke="rgba(196, 196, 194, .2)" strokeWidth="3" strokeMiterlimit="10" fill="none" strokeDasharray="920.2" strokeDashoffset="0" > <animate attributeName="stroke-dashoffset" values="0;920.2;" dur="4s" fill="freeze" begin="1s" /> </path> <rect x="-35" y="-35" rx="15" ry="15" width="70" height="70" strokeWidth="1" stroke="rgba(196, 196, 194, .1)" fill="#F8F7F5" filter="url(#shadow-filter)" > <animateMotion dur="4s" fill="freeze" keyPoints="1;0" keyTimes="0;1" calcMode="linear" begin="1s"> <mpath xlinkHref="#Clasque_3"></mpath> </animateMotion> </rect> </g> <g> <path d="M655.4,635c1.2-172.5,2.3-345,3.5-517.5c0.3-7.8,2.6-21.2,14.1-32.6c11.7-11.5,28.5-20,57.5-20 c18.9,0,78.4,0,97.3,0c64.3,0,138,0,202.4,0h4.1" id="Clasque_6" stroke="rgba(196, 196, 194, .2)" strokeWidth="3" strokeMiterlimit="10" fill="none" strokeDasharray="920.2" strokeDashoffset="0" > <animate attributeName="stroke-dashoffset" values="0;920.2;" dur="4s" fill="freeze" begin="1s" /> </path> <rect x="-35" y="-35" rx="15" ry="15" width="70" height="70" strokeWidth="1" stroke="rgba(196, 196, 194, .1)" fill="#F8F7F5" filter="url(#shadow-filter)" > <animateMotion dur="4s" fill="freeze" keyPoints="1;0" keyTimes="0;1" calcMode="linear" begin="1s"> <mpath xlinkHref="#Clasque_6"></mpath> </animateMotion> </rect> </g> </svg> </div> ); } } ReactDOM.render( <Svg />, document.getElementById("react") );

 <div id="react"></div> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

Answer 1

Register a scroll event listener, assign a value state to your component and assign the corresponding value to your svg

class Svg extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      end: 1
    }
    this.scroll = this.scroll.bind(this)

    window.addEventListener('scroll', this.scroll, true);
  }

  scroll(event) {
    this.setState({
      end: window.scrollY > 100? 0 : (1 - window.scrollY / 100)
    });
  }

  componentWillUnmount() {
    window.removeEventListener('scroll', this.scroll, true);
  }


  render() {
    return (
<div style={{height: '200vh'}}>
    <svg viewBox="0 0 1200 700" width="100%" height="700" xmlSpace="preserve">
        <defs>
            <filter x="-50%" y="-50%" width="200%" height="200%" filterUnits="objectBoundingBox" id="shadow-filter">
                <feOffset dx="0" dy="20" in="SourceAlpha" result="shadowOffsetOuter1" />
                <feGaussianBlur stdDeviation="10" in="shadowOffsetOuter1" result="shadowBlurOuter1" />
                <feColorMatrix values="0.1 0 0 0 0   0 0.2 0 0 0   0 0 0.1 0 0   0 0 0 0.1 0" in="shadowBlurOuter1" type="matrix" result="shadowMatrixOuter1" />
                <feMerge>
                    <feMergeNode in="shadowMatrixOuter1" />
                    <feMergeNode in="SourceGraphic" />
                </feMerge>
            </filter>
        </defs>
        <g>
            <path
                d="M544.9,635c-1.2-172.5-2.3-345-3.5-517.5c-0.3-7.8-2.6-21.2-14.1-32.6c-11.7-11.5-28.5-20-57.5-20
                                    c-18.9,0-78.4,0-97.3,0c-64.3,0-138,0-202.4,0h-4.1"
                id="Clasque_3"
                stroke="rgba(196, 196, 194, .2)" strokeWidth="3" strokeMiterlimit="10" fill="none" strokeDasharray="920.2" strokeDashoffset="0"
            > <animate
                  attributeName="stroke-dashoffset"
                  values={`${(1 - this.state.end)  * 920};${(1 - this.state.end) * 920} ;`}
                  dur="4s"
                  repeatCount="indefinite"
                />
            </path>
            <rect className="rect1" x="-35" y="-35" rx="15" ry="15" width="70" height="70" strokeWidth="1" stroke="rgba(196, 196, 194, .1)" fill="#F8F7F5" filter="url(#shadow-filter)" >
                <animateMotion
                    dur="1s"
                    keyPoints={`${this.state.end};${this.state.end}`}
                    keyTimes="0;1"
                    calcMode="linear"
                    repeatCount="indefinite"
                    >
                    <mpath xlinkHref="#Clasque_3"></mpath>
                </animateMotion>
            </rect>
        </g>
        <g>
            <path
                d="M655.4,635c1.2-172.5,2.3-345,3.5-517.5c0.3-7.8,2.6-21.2,14.1-32.6c11.7-11.5,28.5-20,57.5-20
                                    c18.9,0,78.4,0,97.3,0c64.3,0,138,0,202.4,0h4.1"
                id="Clasque_6"
                stroke="rgba(196, 196, 194, .2)" strokeWidth="3" strokeMiterlimit="10" fill="none" strokeDasharray="920.2" strokeDashoffset="0"
            ><animate
                    attributeName="stroke-dashoffset"
                    values={`${(1 - this.state.end)  * 920};${(1 - this.state.end) * 920} ;`}
                    dur="4s"
                    repeatCount="indefinite"
                />
            </path>
            <rect x="-35" y="-35" rx="15" ry="15" width="70" height="70" strokeWidth="1" stroke="rgba(196, 196, 194, .1)" fill="#F8F7F5" filter="url(#shadow-filter)" >
                <animateMotion
                    dur="1s"
                    keyPoints={`${this.state.end};${this.state.end}`}
                    keyTimes="0;1"
                    calcMode="linear"
                    repeatCount="indefinite"
                    >
                    <mpath xlinkHref="#Clasque_6"></mpath>
                </animateMotion>
            </rect>
        </g>
    </svg>
</div>
    );
  }
}