0

.responsive {
  width:200px;
  float:left;
  margin-top: 750px;
  margin-bottom: 750px;
}

.st0 {
  fill: #ffffff;
}

.st1 {
  fill: none;
  stroke: #afafaf;
  stroke-width: 4;
  stroke-miterlimit: 10;
}

.st2 {
  fill: #ffffff;
  stroke: #afafaf;
  stroke-width: 4;
  stroke-miterlimit: 10;
}

.st3 {
  fill: none;
  stroke: #2646ff;
  stroke-width: 7;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-miterlimit: 10;
}

#responsive .st3 {
  stroke-dasharray: 1932;
  stroke-dashoffset: 0;
  animation: responsive 4s ease-in-out 0s;
  animation-direction: reverse;
}
@keyframes responsive {
  to {
    stroke-dashoffset: 1932;
  }
}
<div class="responsive">

<svg
          version="1.1"
          xmlns="http://www.w3.org/2000/svg"
          xmlns:xlink="http://www.w3.org/1999/xlink"
          x="0px"
          y="0px"
          viewBox="0 0 1200 780"
          style="enable-background:new 0 0 1200 780;"
          xml:space="preserve"
        >
          <g id="Layer_1"></g>
          <g id="Layer_6">
            <g>
              <g>
                <path
                  class="st0"
                  d="M1198,772.2c0,2.8-2.2,5-5,5H7c-2.8,0-5-2.2-5-5V36.6c0-2.8,2.2-5,5-5h1186c2.8,0,5,2.2,5,5V772.2z"
                />
                <path
                  class="st1"
                  d="M1198,772.2c0,2.8-2.2,5-5,5H7c-2.8,0-5-2.2-5-5V36.6c0-2.8,2.2-5,5-5h1186c2.8,0,5,2.2,5,5V772.2z"
                />
              </g>
              <line class="st1" x1="2" y1="688.2" x2="1198" y2="688.2" />
              <ellipse class="st2" cx="559.9" cy="732.7" rx="16.9" ry="16.7" />
            </g>
          </g>
          <g id="Layer_5">
            <g>
              <g>
                <path
                  class="st0"
                  d="M1127.3,771.9c0,2.8-2.2,5-5,5H631.5c-2.8,0-5-2.2-5-5V194.2c0-2.8,2.2-5,5-5h490.8c2.8,0,5,2.2,5,5V771.9z"
                />
                <path
                  class="st1"
                  d="M1127.3,771.9c0,2.8-2.2,5-5,5H631.5c-2.8,0-5-2.2-5-5V194.2c0-2.8,2.2-5,5-5h490.8c2.8,0,5,2.2,5,5V771.9z"
                />
              </g>
              <line class="st1" x1="626.5" y1="715.5" x2="1127.3" y2="715.5" />
            </g>
          </g>
          <g id="Layer_4">
            <g>
              <g>
                <path
                  class="st0"
                  d="M1198,771.9c0,2.8-2.2,5-5,5H976.8c-2.8,0-5-2.2-5-5V352.1c0-2.8,2.2-5,5-5H1193c2.8,0,5,2.2,5,5V771.9z"
                />
                <path
                  class="st1"
                  d="M1198,771.9c0,2.8-2.2,5-5,5H976.8c-2.8,0-5-2.2-5-5V352.1c0-2.8,2.2-5,5-5H1193c2.8,0,5,2.2,5,5V771.9z"
                />
              </g>
              <line class="st1" x1="971.8" y1="732" x2="1198" y2="732" />
            </g>
          </g>
          <g id="responsive">
            <g>
              <path
                class="st3"
                d="M2,35.9L2,772.2 C2,775 4.2,777.2 7,777.2 L1194.1,777.2"
              />
            </g>
          </g>
        </svg>
        
        
        </div>

Scroll down in the snippet to view the svg + animation.

I want to start this animation when svg (animation) is in view. How can I do this? I came across a lot of javascript code but the problem is it's all too complicated with different kind of classes etc. I just do wanna start the animation 1 time and then keep it in the ending state (so not looping or anything).

I gave the section .responsive some margin top and bottom, normally there is content in between the white areas.

Zanic L3
  • 1,028
  • 1
  • 16
  • 28
  • You can find lots of examples of in-view js libraries, just search for it. They usually give the body an `in-view` class. You can start the animation when the `in-view` class is set. – Marc Hjorth Aug 26 '19 at 11:48
  • no need for complicated js-libraries. Just make a scroll function and check the `scrollTop` value against your element's `offsetTop` value. When they are equal it means you have reached your element. Give it a specific class `animate-now` and use that in CSS. Simple as that. – Mihai T Aug 26 '19 at 11:50

1 Answers1

1

If you wanna a simple solution, then WOW.js is your choice :) Steps to add animation for your svg:

  1. Install wow.js as it said in documentation of plugin.
  2. Add wow classname to your animation wrapper, and start css animation on

.animated #responsive .st3 {
  stroke-dasharray: 1932;
  stroke-dashoffset: 0;
  animation: responsive 4s ease-in-out 0s;
  animation-direction: reverse;
}
  1. This is example of how your wow.js init should look like :)

wow = new WOW(
  {
  boxClass:     'wow',      // add this className to animation wrapper
  animateClass: 'animated', // class added by lib, when your item are in view
  offset:       0,          // number of px before item appear on screen and animation starts
  mobile:       true,       // default
  live:         true        // `true` if you add items on page dynamically
}
)
wow.init();
ve1ikiy
  • 171
  • 1
  • 8