UI pack: Can’t use slideUp/Down or fadeIn/Out within Velocity.RegisterEffect

[danielvdspuy]

I’d like to leverage slideUp/Down in my UI transition, but am unable to.

Have tried something like this:

$.Velocity.RegisterEffect("transition.openDrawer", {
    defaultDuration: 800,
    calls: [
        [{ slideDown }, { duration: 1200 }],
        [{ opacity: 1 }, { queue: false }]
    ]
});

As well as:

// line 4
        [slideDown, { duration: 1200 }],

Console output

Uncaught ReferenceError: slideDown is not defined

Is this possible at present?

Many thanks.

[Rycochet]

Both of those are completely invalid Javascript, so not surprising that they don't work to begin with.

I don't know if it's possible to work, but I don't expect it to - feel free to try with valid code -

["slideDown", { duration: 1200 }],

If not then it'll go on the todo list :-)

[danielvdspuy]

Ah! I did try [{"slideDown"},{opts}] but not ["slideDown",{opts}]

Fair enough, slideDown doesn’t belong in an object…

This works:

$.Velocity.RegisterEffect("transition.openDrawer", {
    defaultDuration: 800,
    calls: [
        ["slideDown", { duration: 1200 }],
        [{ opacity: 1 }, { queue: false }]
    ]
});

Thanks!

[Rycochet]

Cool, I didn't know and didn't expect it to, but good to hear :-)

[danielvdspuy]

Thanks for your help with my syntax. 😂

This is probably handy to have in the docs I guess, under UI pack > Effects: Registration, or perhaps under the example(s) for slideUp/Down/fadeIn/Out…

Unfortunately, the queue prop doesn’t work for slideDown, i.e.:

$.Velocity.RegisterEffect("transition.openDrawer", {
    defaultDuration: 2000,
    calls: [
        ["fadeIn", { duration: animationDuration.steady }],
        ["slideDown", { easing: animationBezier.swiftIn, queue: false }],
    ]
});

[Rycochet]

A lot of the props aren't passed on - but changing (which will happen) will be a breaking change in the future.