css animation when scrolling down the website

Question

I am new in web development and I'd like to have scroll activated animation (but only when someone will scroll down).

I've tried to adjust this code to my website https://github.com/reinis-berzins/tutorial-files/blob/master/ScrollActivatedAnimation/scrollAnim.html but it shows only the black circle with text above the circle instead of the figure with outer circle and image (text) inside.

Any advice would be much appreciated.

.container {
  padding: 20px 0;
  text-align: center;
}

.chart {
  position: relative;
  display: inline-block;
  color: #999;
  font-size: 25px;
  text-align: center;
}

.chart figcaption {
  padding: 50px 25px;
  width: 100px;
  height: 50px;
  border: 20px solid #c7bdbd;
  border-radius: 100px;
  line-height: 50px;
}

.chart img {
  position: absolute;
  max-width: 100px;
  max-height: 100px;
  background: white;
}

.html {
  top: 50px;
  left: 45px;
}

.html + svg .outer {
  stroke: #e34f26;
}

.css {
  top: 55px;
  left: 48px;
}

.css + svg .outer {
  stroke: #0d84ce;
}

.javascript {
  max-width: 90px;
  max-height: 90px;
  top: 45px;
  left: 45px;
}

.javascript + svg .outer {
  stroke: #f0e040;
}

.chart svg {
  position: absolute;
  top: 0;
  left: 0;
}

.outer {
  fill: transparent;
  stroke: #333;
  stroke-width: 20;
  stroke-dasharray: 534;
  transition: stroke-dashoffset 1s;
  -webkit-animation-play-state: running;
}
  -moz-transform: rotate(-89deg) translateX(-190px);
}

.chart[data-percent='100'] .outer {
  stroke-dashoffset: 0;
  -webkit-animation: show100 2s;
  animation: show100 2s;
}

.chart[data-percent='75'] .outer {
  stroke-dashoffset: 133;
  -webkit-animation: show75 2s;
  animation: show75 2s;
}

.chart[data-percent='50'] .outer {
  stroke-dashoffset: 267;
  -webkit-animation: show50 2s;
  animation: show50 2s;
}

.chart[data-percent='25'] .outer {
  stroke-dashoffset: 401;
  -webkit-animation: show25 2s;
  animation: show25 2s;
}
.chart[data-percent='10'] .outer {
    stroke-dashoffset: 483;
    -webkit-animation: show10 2s;
    animation: show10 2s;
  }

@-webkit-keyframes show100 {
  from {
    stroke-dashoffset: 537;
  }
  
  to {
    stroke-dashoffset: 0;
  }
}

@keyframes show100 {
  from {
    stroke-dashoffset: 537;
  }
  
  to {
    stroke-dashoffset: 0;
  }
}

@-webkit-keyframes show75 {
  from {
    stroke-dashoffset: 537;
  }
  
  to {
    stroke-dashoffset: 134;
  }
}

@keyframes show75 {
  from {
    stroke-dashoffset: 537;
  }
  
  to {
    stroke-dashoffset: 124;
  }
}

@-webkit-keyframes show50 {
  from {
    stroke-dashoffset: 537;
  }
  
  to {
    stroke-dashoffset: 267;
  }
}

@keyframes show50 {
  from {
    stroke-dashoffset: 537;
  }
  
  to {
    stroke-dashoffset: 267;
  }
}

@-webkit-keyframes show25 {
  from {
    stroke-dashoffset: 537;
  }
  
  to {
    stroke-dashoffset: 401;
  }
}

@keyframes show25 {
  from {
    stroke-dashoffset: 537;
  }
  
  to {
    stroke-dashoffset: 401;
  }
}

@-webkit-keyframes show10 {
    from {
      stroke-dashoffset: 537;
    }
    
    to {
      stroke-dashoffset: 483;
    }
  }
  
  @keyframes show10 {
    from {
      stroke-dashoffset: 537;
    }
    
    to {
      stroke-dashoffset: 483;
    }
  }

			<section class="container">
					
					<h1>Skills</h1>

					<figure class="chart" data-percent="25">
					  <figcaption>HTML</figcaption>
					   <img class="html" src="logo/HTML5.svg">
					  <svg width="200" height="200">
						<circle class="outer" cx="95" cy="95" r="85" transform="rotate(-90, 95, 95)"/>
					  </svg>
					</figure>

					<figure class="chart" data-percent="25">
					  <figcaption>CSS</figcaption>
					  <img class="css" src="logo/CSS3.svg">
					  <svg width="200" height="200">
						<circle class="outer" cx="95" cy="95" r="85" transform="rotate(-90, 95, 95)"/>
					  </svg>
					</figure>                
					
					<figure class="chart" data-percent="10">
					  <figcaption>Javascript</figcaption>
					  <img class="javascript" src="logo/JS.png">
					  <svg width="200" height="200">
						<circle class="outer" cx="95" cy="95" r="85" transform="rotate(-90, 95, 95)"/>
					  </svg>
					</figure>

Answer 1

You probably have to add some JAVASCRIPT to add the class with the animation after you have already scrolled the desired height of the document from the top. for better understanding read out this blog, it will help you out for sure!

Add a CSS class on scroll with Vanilla JavaScript

You can also check out My Portfolio (link below), here scroll to the bottom of the page, I have triggered the animation as we reach the bottom of the page. Hope so that helps!

Portfolio- Scroll till the page end of this webpage

Answer 2

I suggest looking into a JQuery plugin like ViewportCheker - https://github.com/dirkgroenen/jQuery-viewport-checker here's a demo of the sort of thing you can acheive http://www.web2feel.com/freeby/scroll-effects/index.html

I've used it in lots of various projects it's very simple and effective. You basically include the script and jQuery, and call it on the elements you want to check for visibility during page scroll e.g.

$('.dummy').viewportChecker({
    classToAdd: 'visible' // This call could trigger an animation
});

There are lots of available options too, so you can remove the class once the user scrolls past again, and then it will repeat the animation each time it scrolls in/out of view. You can also add a callback function and set offsets for greater control.