Styjun

Were Roman public roads build by private companies?

Selecting 2 column in an Inner join

Make 1998 using the least possible digits 8

Is there a reliable way to hide/convey a message in vocal expressions (speech, song,...)

How are aircraft depainted?

Telling my mother that I have anorexia without panicking her

Fight a biblical flood apart from building barriers

Do all humans have an identical nucleotide sequence for certain proteins, e.g haemoglobin?

What is this unknown executable on my boot volume? Is it Malicious?

Writing a love interest for my hero

Is it appropriate for a professor to require students to sign a non-disclosure agreement before being taught?

What jurisdiction do Scottish courts have over the Westminster parliament?

How is Team Scooby Doo (Mystery Inc.) funded?

Can the card disintegrate destroy creatures with indestructible?

Do they still use tiger roars in the 2019 "Lion King" movie?

What exactly is a marshrutka (маршрутка)?

Why island and not light?

Do my friendships grow, even if I cannot progress the story?

How to work with a technician hired with a grant who argues everything

Can the UK veto its own extension request?

How do email clients "send later" without storing a password?

What is my breathable atmosphere composed of?

When was the earliest opportunity the Voyager crew had to return to the Alpha quadrant?

A shy person in a queue

Velocity JS smooth transition between multiple queued animations

Z-Index and javascript for rolloverVelocity animations for leave callback of ngAnimateHow to check Velocity is animatedShow floated div with percentage width and different patternHow to stop a Velocity animation using “promise-style”Animate a list of svg objects with velocityPause Velocity animation in the middlecomponent design in react, where to put the 'full height'?How stop keyframe Animation exactly after 1 second without to use setTimeout ? - Problem events on queue

.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty margin-bottom:0;

0

I am trying to animate a timeline using velocity JS, however I can't seem to get it to animate smoothly. The snippet below illustrates the problem.

const animate = (currentSecond, totalSeconds) => 
 const currentPercentage = (100 / totalSeconds * currentSecond);
 Velocity(document.getElementById('bar'), 
 width: currentPercentage + '%',
 easing: 'linear'
 ,
 
 duration: 1000
 );
;

animate(1, 20);
animate(2, 20);
animate(3, 20);
animate(4, 20);
animate(5, 20);
animate(6, 20);
animate(7, 20);
animate(8, 20);
animate(9, 20);
animate(10, 20);
animate(11, 20);
animate(12, 20);
animate(13, 20);
animate(14, 20);
animate(15, 20);
animate(16, 20);
animate(17, 20);
animate(18, 20);
animate(19, 20);
animate(20, 20);

console.log("Done adding everything to the queue");

#root 
 width: 100%;
 height: 100%;


#container 
 width: 100%;
 height: 20px;
 background-color: #000000;


#bar 
 width: 0;
 height: 100%;
 background-color: #FF0000;


#description 
 display: flex;
 flex-direction: row;
 justify-content: space-between;

<script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/1.2.2/velocity.min.js"></script>

<script src="https://cdn.jsdelivr.net/npm/lodash@4.17.11/lodash.min.js"></script>
<div id='root' style='width: 100%; height: 100%'>
 <div id='container'>
 <div id='bar'/>
 </div>
 <div id='description'>
 <div>00:00</div>
 <div>00:20</div>
 </div>
</div>

As you can see in the snippet the bar moves every second but you can see it stop and start again. I know I could just set the width to 100% and the duration to the total seconds to make it a singular animation, but I would really like to know if it's possible to make multiple animations of one second happen smoothly after one another.

javascript velocity.js

share|improve this question

asked Mar 28 at 9:45

ApplePearPersonApplePearPerson

1,14444 silver badges2424 bronze badges

• 
  
  
  

  
  1
  

  
  
  
  
  
  

  
  
  Not got the time to write out a full answer - but Velocity V2 fully supports this internally, have a look at github.com/julianshapiro/velocity/wiki/…
  
  – Rycochet
  Apr 12 at 12:42
  

  
  
  
  

add a comment
 | 

0

I am trying to animate a timeline using velocity JS, however I can't seem to get it to animate smoothly. The snippet below illustrates the problem.

const animate = (currentSecond, totalSeconds) => 
 const currentPercentage = (100 / totalSeconds * currentSecond);
 Velocity(document.getElementById('bar'), 
 width: currentPercentage + '%',
 easing: 'linear'
 ,
 
 duration: 1000
 );
;

animate(1, 20);
animate(2, 20);
animate(3, 20);
animate(4, 20);
animate(5, 20);
animate(6, 20);
animate(7, 20);
animate(8, 20);
animate(9, 20);
animate(10, 20);
animate(11, 20);
animate(12, 20);
animate(13, 20);
animate(14, 20);
animate(15, 20);
animate(16, 20);
animate(17, 20);
animate(18, 20);
animate(19, 20);
animate(20, 20);

console.log("Done adding everything to the queue");

#root 
 width: 100%;
 height: 100%;


#container 
 width: 100%;
 height: 20px;
 background-color: #000000;


#bar 
 width: 0;
 height: 100%;
 background-color: #FF0000;


#description 
 display: flex;
 flex-direction: row;
 justify-content: space-between;

<script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/1.2.2/velocity.min.js"></script>

<script src="https://cdn.jsdelivr.net/npm/lodash@4.17.11/lodash.min.js"></script>
<div id='root' style='width: 100%; height: 100%'>
 <div id='container'>
 <div id='bar'/>
 </div>
 <div id='description'>
 <div>00:00</div>
 <div>00:20</div>
 </div>
</div>

As you can see in the snippet the bar moves every second but you can see it stop and start again. I know I could just set the width to 100% and the duration to the total seconds to make it a singular animation, but I would really like to know if it's possible to make multiple animations of one second happen smoothly after one another.

javascript velocity.js

share|improve this question

asked Mar 28 at 9:45

ApplePearPersonApplePearPerson

1,14444 silver badges2424 bronze badges

• 
  
  
  

  
  1
  

  
  
  
  
  
  

  
  
  Not got the time to write out a full answer - but Velocity V2 fully supports this internally, have a look at github.com/julianshapiro/velocity/wiki/…
  
  – Rycochet
  Apr 12 at 12:42
  

  
  
  
  

add a comment
 | 

I am trying to animate a timeline using velocity JS, however I can't seem to get it to animate smoothly. The snippet below illustrates the problem.

const animate = (currentSecond, totalSeconds) => 
 const currentPercentage = (100 / totalSeconds * currentSecond);
 Velocity(document.getElementById('bar'), 
 width: currentPercentage + '%',
 easing: 'linear'
 ,
 
 duration: 1000
 );
;

animate(1, 20);
animate(2, 20);
animate(3, 20);
animate(4, 20);
animate(5, 20);
animate(6, 20);
animate(7, 20);
animate(8, 20);
animate(9, 20);
animate(10, 20);
animate(11, 20);
animate(12, 20);
animate(13, 20);
animate(14, 20);
animate(15, 20);
animate(16, 20);
animate(17, 20);
animate(18, 20);
animate(19, 20);
animate(20, 20);

console.log("Done adding everything to the queue");

#root 
 width: 100%;
 height: 100%;


#container 
 width: 100%;
 height: 20px;
 background-color: #000000;


#bar 
 width: 0;
 height: 100%;
 background-color: #FF0000;


#description 
 display: flex;
 flex-direction: row;
 justify-content: space-between;

<script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/1.2.2/velocity.min.js"></script>

<script src="https://cdn.jsdelivr.net/npm/lodash@4.17.11/lodash.min.js"></script>
<div id='root' style='width: 100%; height: 100%'>
 <div id='container'>
 <div id='bar'/>
 </div>
 <div id='description'>
 <div>00:00</div>
 <div>00:20</div>
 </div>
</div>

As you can see in the snippet the bar moves every second but you can see it stop and start again. I know I could just set the width to 100% and the duration to the total seconds to make it a singular animation, but I would really like to know if it's possible to make multiple animations of one second happen smoothly after one another.

javascript velocity.js

share|improve this question

asked Mar 28 at 9:45

ApplePearPersonApplePearPerson

1,14444 silver badges2424 bronze badges

const animate = (currentSecond, totalSeconds) => 
 const currentPercentage = (100 / totalSeconds * currentSecond);
 Velocity(document.getElementById('bar'), 
 width: currentPercentage + '%',
 easing: 'linear'
 ,
 
 duration: 1000
 );
;

animate(1, 20);
animate(2, 20);
animate(3, 20);
animate(4, 20);
animate(5, 20);
animate(6, 20);
animate(7, 20);
animate(8, 20);
animate(9, 20);
animate(10, 20);
animate(11, 20);
animate(12, 20);
animate(13, 20);
animate(14, 20);
animate(15, 20);
animate(16, 20);
animate(17, 20);
animate(18, 20);
animate(19, 20);
animate(20, 20);

console.log("Done adding everything to the queue");

#root 
 width: 100%;
 height: 100%;


#container 
 width: 100%;
 height: 20px;
 background-color: #000000;


#bar 
 width: 0;
 height: 100%;
 background-color: #FF0000;


#description 
 display: flex;
 flex-direction: row;
 justify-content: space-between;

<script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/1.2.2/velocity.min.js"></script>

<script src="https://cdn.jsdelivr.net/npm/lodash@4.17.11/lodash.min.js"></script>
<div id='root' style='width: 100%; height: 100%'>
 <div id='container'>
 <div id='bar'/>
 </div>
 <div id='description'>
 <div>00:00</div>
 <div>00:20</div>
 </div>
</div>

const animate = (currentSecond, totalSeconds) => 
 const currentPercentage = (100 / totalSeconds * currentSecond);
 Velocity(document.getElementById('bar'), 
 width: currentPercentage + '%',
 easing: 'linear'
 ,
 
 duration: 1000
 );
;

animate(1, 20);
animate(2, 20);
animate(3, 20);
animate(4, 20);
animate(5, 20);
animate(6, 20);
animate(7, 20);
animate(8, 20);
animate(9, 20);
animate(10, 20);
animate(11, 20);
animate(12, 20);
animate(13, 20);
animate(14, 20);
animate(15, 20);
animate(16, 20);
animate(17, 20);
animate(18, 20);
animate(19, 20);
animate(20, 20);

console.log("Done adding everything to the queue");

#root 
 width: 100%;
 height: 100%;


#container 
 width: 100%;
 height: 20px;
 background-color: #000000;


#bar 
 width: 0;
 height: 100%;
 background-color: #FF0000;


#description 
 display: flex;
 flex-direction: row;
 justify-content: space-between;

<script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/1.2.2/velocity.min.js"></script>

<script src="https://cdn.jsdelivr.net/npm/lodash@4.17.11/lodash.min.js"></script>
<div id='root' style='width: 100%; height: 100%'>
 <div id='container'>
 <div id='bar'/>
 </div>
 <div id='description'>
 <div>00:00</div>
 <div>00:20</div>
 </div>
</div>

const animate = (currentSecond, totalSeconds) => 
 const currentPercentage = (100 / totalSeconds * currentSecond);
 Velocity(document.getElementById('bar'), 
 width: currentPercentage + '%',
 easing: 'linear'
 ,
 
 duration: 1000
 );
;

animate(1, 20);
animate(2, 20);
animate(3, 20);
animate(4, 20);
animate(5, 20);
animate(6, 20);
animate(7, 20);
animate(8, 20);
animate(9, 20);
animate(10, 20);
animate(11, 20);
animate(12, 20);
animate(13, 20);
animate(14, 20);
animate(15, 20);
animate(16, 20);
animate(17, 20);
animate(18, 20);
animate(19, 20);
animate(20, 20);

console.log("Done adding everything to the queue");

#root 
 width: 100%;
 height: 100%;


#container 
 width: 100%;
 height: 20px;
 background-color: #000000;


#bar 
 width: 0;
 height: 100%;
 background-color: #FF0000;


#description 
 display: flex;
 flex-direction: row;
 justify-content: space-between;

<script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/1.2.2/velocity.min.js"></script>

<script src="https://cdn.jsdelivr.net/npm/lodash@4.17.11/lodash.min.js"></script>
<div id='root' style='width: 100%; height: 100%'>
 <div id='container'>
 <div id='bar'/>
 </div>
 <div id='description'>
 <div>00:00</div>
 <div>00:20</div>
 </div>
</div>

share|improve this question

asked Mar 28 at 9:45

ApplePearPersonApplePearPerson

1,14444 silver badges2424 bronze badges

share|improve this question

asked Mar 28 at 9:45

ApplePearPersonApplePearPerson

1,14444 silver badges2424 bronze badges

asked Mar 28 at 9:45

ApplePearPersonApplePearPerson

1,14444 silver badges2424 bronze badges

asked Mar 28 at 9:45

ApplePearPersonApplePearPerson

1,14444 silver badges2424 bronze badges