How to get smooth "shift up/down" animation? about amaranjs

[hakanersu]

Actually this issue on my list for a long time.
https://github.com/hakanersu/AmaranJS/blob/master/src/coffee/jquery.amaran.coffee#L182-L191

My calculations for slide to top and bottom not very accurate each calculation must be recalculate after an element added or removed.But after adding animate.css feature it seems try to fix this issue with css3 (implementing css3 slide animation with javascript support) better than javascript.
https://github.com/hakanersu/AmaranJS/blob/master/src/coffee/jquery.amaran.coffee#L211-L269

[KrishnaPG]

I am not an expert on UI programming / CSS - but I guess this item moving functionality is similar to item reorder and filter functionality like that of QuickSand (http://razorjack.net/quicksand/ )

Not sure how they do it in Quicksand plugin, but a group of items move very nicely to different destinations. Something like that here would be cool. At least in our present case, the situation is slightly easier, since each item has to move into the location of next one - so, may be you are right, some kind of CSS animation that can take 'source and destination places' and moves them smoothly should do it.

Just now looked into the demo of quicksand and they are doing something like style=transform... May be that's the approach to take.

Also, a related feature is, to only keep certain "max no. of items" on the screen. If any new message arrives beyond the max no., then the old ones will be deleted from the top/bottom of screen to make space for new ones (instead of keep pushing them off screen). This way, at any point of time only certain configured n no. of max. items will be visible on screen - very useful for building admin dashboards etc. that retain the last 5/10/15 messages on screen.

[hakanersu]

I am pretty sure that they are using jQuery Easing plugin.When i started this plugin my goal was simplicity and after all new features amaranjs not simple at all so i can implement easing plugin to project.

[KrishnaPG]

In fact, before choosing AmaranJS, I have evaluated almost all notification plugins out there. What I found is, AmaranJS is the one with the best customization features and has the nearly most features - so, in no way it is a simple plugin - its now a "notification solution" for JS :)

The only few missing / lacking features, if any, are as below, otherwise it would go to rank 1:

 1. Support for only Fixed no. of maximum messages that can be displayed on screen
 2. Ability to show "remaining time" before the message gets discarded / removed 
 3. Ability to keep the message under mouse stay there while user has mouse hovered
 4. Ability to position the messages pre element and also per global
 5. Ability to programatically close any single message visible on the screen (useful for 'click' handler)

The awesome features that would make this move years ahead of others would be:

6. Smooth up/down transitions (perhaps even configurable by programmer)
7. In-built support for "Notification Center" UI (perhaps as a plugin) with all old messages archive accessible
8. Fadeout/Zoomout to particular location on the screen (e.g. zoomout to the "notification center" icon on top nav menu) when the messages timeout and disappear
9. Ability to make any single message sticky through UI (e.g. a "sticky" icon next to "close" icon that users can click to make it stick there, and perhaps even with "minimize" icon option, like this one here: http://jspanel.de/)

I know the list is big - but the advantage is, AmaranJS is more close to achieving these, than most plugins out there. Thanks for creating this good plugin and sharing it with the world.

[hakanersu]

@KrishnaPG actually its a great list and i can use as roadmap for amaranjs :) I can implement most of them.

[KrishnaPG]

That would be awesome - Thank you. I am already sharing word about this plugin in social media - would be beneficial to many.