How to apply the animation to an element until scroll to it?

Question

I have some skill bars on my page like this:

And I am using the following CSS to do the animation.

.progress {
  height: 10px;
  background: #333;
  border-radius: 0;
  box-shadow: none;
  margin-bottom: 30px;
  overflow: visible;
}

.progress .progress-bar {
  position: relative;
  -webkit-animation: animate-positive 2s;
  animation: animate-positive 2s;
}

.progress .progress-bar:after {
  content: "";
  display: inline-block;
  width: 9px;
  background: #fff;
  position: absolute;
  top: -10px;
  bottom: -10px;
  right: -1px;
  z-index: 1;
  transform: rotate(35deg);
}

.progress .progress-value {
  display: block;
  font-size: 16px;
  font-weight: 600;
  color: #333;
  position: absolute;
  top: -30px;
  right: -25px;
}

@-webkit-keyframes animate-positive {
  0% {
    width: 0;
  }
}

@keyframes animate-positive {
  0% {
    width: 0;
  }
}

<div class="progress">
  <div class="progress-bar" style="width:60%; background:linear-gradient(to bottom right, #a1c4fd, #c2e9fb);">
    <div class="progress-value">60%</div>
  </div>
</div>

How to make them stay at 0% until I scroll to this part? I know the scrollTo function in jQuery but I don't know how to apply to this one.

Check this answer they are doing exactly what you need using jquery: https://stackoverflow.com/questions/21561480/trigger-event-when-user-scroll-to-specific-element-with-jquery — pegla, Sep 17 '17 at 08:23
@pegla I know how to trigger some function when scroll to somewhere. But the problem is that I want to keep the css style and apply the animation until scroll to it. Don't know what to trigger — Patroclus, Sep 17 '17 at 08:26
If you know that, can't you just put all styles for animation in one css class, then based on when you scroll to element, just trigger that on with: $(scrolledElement).addClass('progress-bar'); — pegla, Sep 17 '17 at 08:31

score 0 · Accepted Answer · answered Sep 17 '17 at 08:19

You can use wowjs alongwith animate.css! It's simple and you can apply effects on any element when it enters the viewport. It also gives you options to manipulate animation delay, animation duration and more.

Here are the links:

WowJS: http://mynameismatthieu.com/WOW/

AnimateCSS https://daneden.github.io/animate.css/

How to apply the animation to an element until scroll to it?

1 Answers1