How to start animation at a certain point (75 %)?

Question

I pick up on this question. What I have so far:

$('.lock').click(function () {
  $('.fa-lock', this).addClass('fa-flip');
  $('.fa-unlock', this).addClass('fa-flip');
  setTimeout(function () {
    $('.fa-lock').css('color', 'rgba(0, 0, 0, 0)');
    $('.fa-unlock').css('color', 'green');
  }, 1250);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta2/js/all.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta2/css/all.min.css" rel="stylesheet"/>
<div class="fa-5x fa-stack lock">
  <i class="fas fa-unlock fa-stack-1x" style="--fa-animation-duration: 5s; --fa-animation-iteration-count: 1; color: rgba(0, 0, 0, 0)"></i>
  <i class="fas fa-lock fa-stack-1x" style="--fa-animation-duration: 5s; --fa-animation-iteration-count: 1; color: red"></i>
</div>

But only the last quarter of the green unlock icon animation should follow the visible red lock icon animation. How can I start the animation at 75 %?

Or would you do it all differently? Maybe without Font Awesome's animation functions?

the Hutt · Accepted Answer · 2021-11-09T15:40:41.880

3

You need to override .fa-flip animation:

$('.lock').click(function() {
  $('.fa-lock', this).addClass('fa-flip');
  $('.fa-unlock', this).addClass('fa-flip');
  setTimeout(function() {
    $('.fa-lock').css('color', 'rgba(0, 0, 0, 0)');
    $('.fa-unlock').css('color', 'green');
  }, 600);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta2/js/all.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta2/css/all.min.css" rel="stylesheet" />
<style>
  @keyframes halfflip {
    to {
      transform: rotateY(360deg);
    }
  }
  
  .fa-flip {
    animation-name: halfflip;
    animation-timing-function: ease-in-out;
  }
  
</style>
<div class="fa-5x fa-stack lock">
  <i class="fas fa-unlock fa-stack-1x" style="--fa-animation-duration: 4s; --fa-animation-iteration-count: 1; color: transparent; animation-fill-mode: forwards; --fa-animation-delay:-2s"></i>
  <i class="fas fa-lock fa-stack-1x" style="--fa-animation-duration: 4s; --fa-animation-iteration-count: 1; color: red; animation-fill-mode: forwards; --fa-animation-delay:-2s"></i>
</div>

I hope this is what you wanted.

edited Nov 09 '21 at 15:40

answered Nov 09 '21 at 14:33

the Hutt

16,980
2
14
44

Thank you! But unfortunately this is not exactly what I was looking for. In your snippet the second quarter of the green unlock icon animation is displayed instead of the fourth. As a result, the unlock icon is displayed the wrong way round. – Three Year Old Nov 09 '21 at 15:25
1

I have updated the answer. Try now. – the Hutt Nov 09 '21 at 15:41
Now that's what I wanted. Thank you very much! – Three Year Old Nov 09 '21 at 15:48
Could you even change it to toggle? – Three Year Old Nov 09 '21 at 15:49
You mean change from red locked to green unlocked in place? Just remove these lines from javascript ` $(".fa-lock", this).addClass("fa-flip"); $(".fa-unlock", this).addClass("fa-flip");` – the Hutt Nov 09 '21 at 16:07
No. I mean, that a click on the red lock icon does exactly what your updated snippet does, plus a click on the green unlock icon does the corresponding opposite. – Three Year Old Nov 09 '21 at 16:20
1

@ThreeYearOld You are now asking a second question... Please close this question (by choosing a Best Answer - checkmark) and ask a new question. You receive reputation points every time you close (checkmark) a question, so it is good for you. The answer-giver receives points for *each* answer which is good for them. The design of StackOverflow is to reward each question/answer pair. *(Also, at the moment, only Onkar Ruikar will see your additional question -- when you ask the new question, dozens of people will see it immediately and be able to respond - which is Very good for you.)* – cssyphus Nov 09 '21 at 17:08
You're right. Thank you! – Three Year Old Nov 09 '21 at 18:13
@onkarruikar Could you explain the 600 milliseconds? How did you calculate them? – Three Year Old Nov 09 '21 at 18:28
1

@ThreeYearOld it's animation timing function. If it were `linear` then we would've used 1000ms delay. https://cubic-bezier.com/ – the Hutt Nov 10 '21 at 01:20
But how did you calculate them? – Three Year Old Nov 10 '21 at 16:19
1

https://www.desmos.com/calculator/ervs7hlikl this is approximate ease-in-out curve. Time is X-axis and Progress is Y axis. As we are interested in 75% progress to change colors, that falls at time 2.6s. As our animation starts at 2s the delay is 600ms. This is still approximate, to get accurate values we need to solve the cubic-baizer equation for ease-in-out `.42,0,.58,1`. I haven't found any online calculator so using graphs. – the Hutt Nov 10 '21 at 17:01

How to start animation at a certain point (75 %)?

1 Answers1

Linked