Poor performance when using % values in staggered lists

Your system information

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

Checklist

• 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):

JSFiddle

[Rycochet]

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).

[Rycochet]

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 😃