Is it me, or slideUp/slideDown no longer work (Velocity 2.0.1)?

[MeIsMat]

Your system information

• VelocityJS version: 2.0.1
• Browser: FireFox 57.0.2
• Operating System: Win 10

Checklist

• Have you reproduced this in other browsers?: [No]
• Have you checked for updates?: [Yes]
• Have you checked for similar open issues?: [Yes]

Please remember that this is an issue tracker, support requests should be posted on StackOverflow - see CONTRIBUTING.md

Please describe your issue in as much detail as possible:

I'm green, just made account on github, so - sorry if I'm doing this reporting-an-issue stuff incorrectly... And - hello github people :) Problem: Lost half a day trying to figure out what's wrong with my code, because slideUp/slideDown didn't work. Finally, I changed velocity's source to older version (1.5.1), and it works. I'm using velocity with jQuery (tried both with older and most recent jQuery). Can anyone confirm commands slideUp and slideDown not working on velocity 2.0.1? Or was it removed in recent version and documentation (http://velocityjs.org/) is not up-to-date? Or am I missing something?

Here's working example I found - jQ 2.1.3 and velocity 1.2.3: https://codepen.io/cmcg/pen/JXrddz Here's the exact same thing, but using jQ 2.1.3 and velocity 2.0.1, not working: https://codepen.io/MeIsMatt/pen/MQRyJQ

[Rycochet]

They've been removed, though should get back in when I get sequences finished - velocityjs.org is not the documentation for V2 (I've just made it even more obvious in the readme) - that will get updated after V2 comes out of beta, but until then you have to manually choose to install the beta, so it uses different documentation.

[MeIsMat]

Thank you kindly for your response, it all makes sense now. I came to velocityjs.org because it's the first result in google, and because it is much more user-friendly than GitHub for lay person such as me. Just a thought, don't take it as a criticism - perhaps it would be less confusing if "Download Velocity" link on velocityjs.org would point to a version that is actually described there on the page, instead of 2.0.1? Placing "IMPORTANT: velocityjs.org refers to V1, not V2 beta - use the wiki for documentation!" on velocityjs.org wouldn't hurt too, since readme is on GitHub, not available directly from velocityjs.org :)

Thanks again, and all the best, Matt

[Rycochet]

Doh, didn't realise it was pointing at that - I'll make sure it's updated with the updated website, but that's just bad in general as it's not actually pointing at any specific release, just the current state of the master branch - not good!

When we get out of beta, wanting the website to have the wiki content, but in a slightly better layout closer to the old website - at least until we get a nice shiny new site finished (one of our sponsors has some awesome plans)!

Wanting to leave this issue open for anyone else that comes along until it's back in there :-)

[yura3d]

Why did you even release versions 2.0/2.0.1 as stable if you say on this issue page and on some others that half of functionality is not ready? Today, on velocityjs.org the big "Download Velocity" link suggests only 2.0.1 version with description:

Since Velocity's syntax is identical to $.animate(), your code doesn't need to change

But this is false! 2.0.1 is not working as described in this quote. Since my updating from 1.5.1 I've found the issue #852, but you preferred to close it quickly without providing useful information on it.

[Rycochet]

@yura3d Please read the main github page, to summarise - Velocity V2 does not use velocityjs.org for documentation. The link on that page should never have used that URL for linking as it would almost never actually be correct, and could point at unstable code rather than releases. Your issue was closed because you completely ignored the issue template, although I did actually answer it before locking it.

[hackuun]

Yes, they not working. I got Deprecated 'options.display' used, this is now a property: block

So they will eventually come back? I hope?

[AterDeus]

So, How can i use slideUp/slideDown now? Or what is alternative? Couldn't get this info from your wiki. And please add link to velocity V1 and CDN to latest V1.

[Zer0ne83]

hyperventilates I very, very much wish I had read this approximately 3 hours ago. My fault, I should have checked the versioning but because literally 9/10ths of the transitions I tried were completely broken I assumed I had done something stupid or there was a conflict with another framework or plugin. v2.0.0 is literally everywhere (and frequently the only option) in the usual CDNs Ryco and for the most part its straight up broken if you are trying to implement without JQuery. Dat 'Stable' tag :/

[Rycochet]

@Zer0ne83 I'm hoping to get the packaging for v2 finished this weekend - the new transitions and code are in there, but the UI-Pack is currently totally unrelated to them - once it's done I'll make sure the wiki is updated with them, and hopefully be able to look at neatening up the wiki / docs to be able to remove the beta tag this weekend too!

Anyway - the correct way to do the previous "slideDown" is to use the animate.css name for the animation directly (no transition. or callout. prefix) - it's almost the same, but needs to know if it's slide-in or slide-out -

document.querySelectorAll(".myElements").velocity("slideInDown", { duration: 500 } );
document.querySelectorAll(".myElements").velocity("slideOutUp", { duration: 500 } );

NOTE: The other ways of calling Velocity (including via jQuery etc) are all valid too etc.

There are a lot of variations available - but all of them will be via the UI-Pack, and only a couple will be included, see https://github.com/daneden/animate.css for the full list of included transitions.

It's also far easier to create complicated multi-element animations that need to be in sync with the new code, something that wasn't possible at all in the old code (you could try for sync, but it was hacking things etc)

[Zer0ne83]

Thanks for the detailed reply mate I appreciate it. After my passive aggressive rant I pulled an old 1.51 off a CDN and within 5 minutes I was too aroused by the smooth animation orgy engulfing my UI to remember why I was upset haha. I will try your solution/syntax again on 2.02 tommoz as I have no doubt you haven't coded a new V for shitz'n'gigglz; excited to see what's new. Thanks again for the help and big props for UI animation without JQ - Ive had nothing but nightmares with JQ and Electron and all I wanted was some slick anim, the functional stuff ES6 can handle. V.js fits the bill :)

[Rycochet]

V1 doesn't actually need jQuery - the parts of it that are used are shimmed if they don't exist - but it's nowhere near as nice as V2 when it comes to doing anything from any way to select an element (whether jQuery, Zepto, or System), and gives a lot more power to the user - there were so many bugs and workarounds in V1 that some things were next to impossible to implement - now it's easy to understand code (well, to us at least lol).

[ACatThatPrograms]

@Rycochet Sorry mate, I feel like a jerk for clogging the issues earlier today. Didn't realize this was already covered in comments somewhere. I also can't believe I didn't see it. Late night and ignorance on my part.

Your comment above on slideDown as I understand it then, it just needs tweaked to slideInDown to be good relatively the same as V1's 'SlideDown?'

[Rycochet]

@ACatThatPrograms I think it was that way around - but you now have options and can do the In / Out any direction you wish :-)

[ACatThatPrograms]

I suppose the last concern then would be, the old slideUp redirect utilized the same animation principles found in jquery's slideUp, where height was changed without opacity being altered, this implementation of the slide animations seems centered around a 3d tranformation of the entire div and using opacity to phase them in and out.

Is there a more suitable method in V2 for emulating the height and 'accordion' like changes found in v1?

Shifting height alone doesn't really emulate the old effect.

[Rycochet]

Would need someone to code it - as it's not simply a css effect - but Velocity never matched the jQuery style one at all. Feel free to put something together if you'd like to get it back in here ;-)

[ChrisRobston]

I found this very hilarious, since slideUp/slideDown was the only option why I used VelocityJS :smile: More specific - for height animation etc, since I am not using jQuery.

Are you guys killing VelocityJS for some reason, lol?

[Rycochet]

@canyoudev Perhaps you should read things instead of making stupid comments...