How to activate an animation after another animation has finihed

Question

I have a code snippet (below) that I want to animate when you scroll to it. It is working but the classes that animate the circle are activating at the same time which makes it look wrong. How can I get the circle to fill up normally and not in two separate animations? Do I need a delay for this and what will happen if I add a delay and then change the percentage? Would the delay then be off?

I am using wow.js to activate this on scroll.

If you would like to edit the codepen instead as I am using SCSS for this but obviously couldn't include that in my snippet on here.

var wow = new WOW({
  animateClass: 'fill'
});
wow.init();

#sample-text {
  width: 20%;
}

.circle-wrap {
  width: 150px;
  height: 150px;
  background: #ddd;
  border-radius: 50%;
}

.circle-wrap .fill {
  width: 150px;
  height: 150px;
  position: absolute;
  border-radius: 50%;
}

.circle-wrap .mask {
  width: 150px;
  height: 150px;
  position: absolute;
  border-radius: 50%;
  clip: rect(0px, 150px, 150px, 75px);
}

.circle-wrap .fill {
  clip: rect(0px, 75px, 150px, 0px);
  background-color: #00B16A;
}

.circle-wrap .circle .mask.full,
.fill {
  animation: fill ease-in-out 3s;
  transform: rotate(170deg);
}

@keyframes fill {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(170deg);
  }
}

.circle-wrap .inside-circle {
  width: 130px;
  height: 130px;
  border-radius: 50%;
  background: #fff;
  line-height: 130px;
  text-align: center;
  margin-top: 10px;
  margin-left: 10px;
  position: absolute;
  z-index: 100;
  font-weight: 700;
  font-size: 2em;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/wow/1.1.2/wow.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="sample-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
  in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed
  do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu
  fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
  aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
  non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation
  ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit
  anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>

<div class="circle-wrap">
  <div class="circle">
    <div class="mask full">
      <div class="fill wow"></div>
    </div>
    <div class="mask half">
      <div class="fill wow"></div>
    </div>
    <div class="inside-circle">
      95%
    </div>
  </div>
</div>

score 0 · Answer 1 · answered Aug 23 '18 at 11:36

0

You can add a delay to an animation like this

animation: fill 3s ease-in-out 1s;

Where 1s is the delay

answered Aug 23 '18 at 11:36

BloodyMonkey

1,572
1
9
15

But obviously the 2 halves of my circle are using the same class so how do I make the second one activate once the first has finished animating? – Emma Dalby Aug 23 '18 at 11:37
You can add a class to your second half and change the delay .full{ animation-delay: 6s; } – BloodyMonkey Aug 23 '18 at 11:51
That doesn't work either unfortunately as the class is still triggered the first time when you scroll down, even though it has the delay on. Also, when you change the percentage, the dealy value would need to be updated which is something that I'd rather avoid. I think this needs to be done with jQuery to be honest but I'm a little lost as to how to do it. – Emma Dalby Aug 23 '18 at 11:56
Did you do the circle yourself ? You should see here http://jsfiddle.net/zap4f/1/ – BloodyMonkey Aug 23 '18 at 12:13

score 0 · Answer 2 · answered Aug 23 '18 at 12:07

0

Have you tried using the data-wow-delay option?

Seems like it could be handy in conjunction with data-wow-duration

They're described here under 'Advanced Options'.

answered Aug 23 '18 at 12:07

Louis

181
1
8

How can I get this to activate at the correct time though? There's surely a better way than guesswork on how much time it should be delayed? – Emma Dalby Aug 23 '18 at 12:44
My thinking was that by setting the animation time of the first arc using `data-wow-duration`, you could then delay the second arc by that exact amount – Louis Aug 23 '18 at 12:48
Ah ok. I understand where you're coming from. I had a go here https://codepen.io/digitalbydefault/pen/LJYPXw but it doesn't appear to be working :( – Emma Dalby Aug 23 '18 at 12:53

score 0 · Accepted Answer · answered Aug 28 '18 at 08:16

Got this working. Please see below:

It works better on codepen here: https://codepen.io/digitalbydefault/pen/LJYPXw

$(window).on('scroll', function() {
  var position = $(this).scrollTop();
  if( position >= $('.circle-wrap').scrollTop() ) {
    $('.trigger').addClass('animate');
  } else {
    $('.trigger').removeClass('animate');
  }
});

#sample-text {
  width: 20%;
}

.circle-wrap {
  width: 150px;
  height: 150px;
  background: #ddd;
  border-radius: 50%;
}
.circle-wrap .fill {
  width: 150px;
  height: 150px;
  position: absolute;
  border-radius: 50%;
  clip: rect(0px, 75px, 150px, 0px);
  background-color: #00B16A;
}
.circle-wrap .mask {
  width: 150px;
  height: 150px;
  position: absolute;
  border-radius: 50%;
  clip: rect(0px, 150px, 150px, 75px);
}

.full.ninety,
.ninety fill {
  transform: rotate(170deg);
}

.ninety.full.animate,
.ninety.animate .fill {
  animation: ninety linear 3s forwards;
}

@keyframes ninety {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(170deg);
  }
}
.full.seventy,
.seventy fill {
  transform: rotate(170deg);
}

.seventy.full.animate,
.seventy.animate .fill {
  animation: seventy linear 3s forwards;
}

@keyframes seventy {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(130deg);
  }
}
.circle-wrap .inside-circle {
  width: 130px;
  height: 130px;
  border-radius: 50%;
  background: #fff;
  line-height: 130px;
  text-align: center;
  margin-top: 10px;
  margin-left: 10px;
  position: absolute;
  z-index: 100;
  font-weight: 700;
  font-size: 2em;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="sample-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>

<div class="circle-wrap">
  <div class="circle">
    <div class="mask full seventy trigger">
      <div class="fill"></div>
    </div>
    <div class="mask half seventy trigger">
      <div class="fill"></div>
    </div>
    <div class="inside-circle">
      95%
    </div>
  </div>
</div>

How to activate an animation after another animation has finihed

3 Answers3