Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Poor performance when using % values in staggered lists

See original GitHub issue

Your system information

  • VelocityJS version: 2.0.1
  • Browser: Chrome
  • Operating System: Windows


  • Is this an issue with code?: [Yes]
  • Is this an issue with documentation?: [No]
  • Have you reproduced this in other browsers?: [Yes]
  • Have you checked for updates?: [Yes]
  • Have you checked for similar open issues?: [Yes]

Please describe your issue in as much detail as possible:

The performance is really poor when translating % values within staggered effects. If I use normal integers, the performance is pretty good.

Again, the performance issues don’t exist in the jsfiddle version probably because of the simple DOM, but they’re real…

Steps for reproducing this issue (code):

Here’s the code:

            $.Velocity.RegisterEffect("custom.fadeOutRight", {
                defaultDuration: 500,
                calls: [
                        opacity: [0.5, "easeOutCubic", 1],
                        translateX: ["30%", "easeOutCubic", "0%"]

            $(".answer__card").velocity("custom.fadeOutRight", { stagger: 100 });

The code differs from the jsfiddle version, because transform: “translateX(30%)” didn’t seem to work at all and vice versa.

JSFiddle example showing issue in action (code):


Issue Analytics

  • State:closed
  • Created 6 years ago
  • Comments:5

github_iconTop GitHub Comments

Rycochetcommented, Feb 26, 2018

It’s not finished yet - but it’ll have a different signature - closer to parallel CSS animations.

You’ll be able to register it to run when requested (with anything from one to many elements with different animations in parallel), or you’ll be able to pass in a sequence directly and run one without having to register it first.

Once it’s finished it’ll go in the wiki (just busy with a new job and the normal weekly events I run etc).

Rycochetcommented, Jun 10, 2018

Stagger has only just been added to V2, and the new Sequences are there too - feel free to re-open (with an updated fiddle) if they have the same problem 😃

Read more comments on GitHub >

github_iconTop Results From Across the Web

Creating an array with a single staggered values in each row?
I need to generate an nX3 array of zeros but one of the columns has the value (1.0) staggered in each row. Desired...
Read more >
Understanding Indico's Staggered Loop
With Indico's staggered loop, your model retrains using your production data, keeping your data current without additional hands-on time.
Read more >
Settling the Staggered Board Debate
Our initial results show that firm value is negatively affected by a staggered board, which is consistent with the prominent study of Bebchuk...
Read more >
Staggered and In-line Submerged Jet Arrays for Power ...
Staggered and In-line Submerged Jet Arrays for Power Electronics Using Variable Area. Discharge Manifolds by. Michael Andrew Henry.
Read more >
Staggered‐grid split‐node method for spontaneous rupture ...
This leads to a boundary value problem in which the shear traction that acts at the frictional interface during rupture is conditioned to...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Post

No results found

github_iconTop Related Hashnode Post

No results found