search

AshesOfOwls / jquery.shapeshift

A dynamic grid system with drag and drop functionality.
http://ashesofowls.github.com/jquery.shapeshift/
MIT License
1.67k stars 311 forks source link

css3 gpu driven animations #23

Open senner007 opened 11 years ago

senner007 commented 11 years ago

Excellent plugin!

It really works and by the looks of it can be used as a regular sortable plugin with smooth animations.

Here is the question?

Does it use css to animate? If not how could this be implemented?

AshesOfOwls commented 11 years ago

Unfortunately I am not sure it's possible. I have done some research into how to make animation better but it seems like browser limitations triumph over any solutions.

I did stumble upon this plugin: https://github.com/medihack/massanimate

The problem is that CSS driven animations require a preset X/Y position for each element. Every time you animate something in Shapeshift, though, you are moving items to a completely unknown position. This means a CSS transition would have to be created every time an item is moved which is very costly in terms of performance.

In the future I am planning to integrate more animation options such as easing but for now I am trying to focus on getting multiwidth to a stable point. Hopefully I can get better animation options at around version 2.5, but it might have to wait for version 3.0 with a full refactoring of the code.

AshesOfOwls commented 11 years ago

I was wrong about this, it will be a feature in 3.0

senner007 commented 11 years ago

Sweet!

AshesOfOwls commented 10 years ago

This is currently working in the 3.0 branch. There is some cool stuff I added that makes use of it so keep an eye out.

senner007 commented 10 years ago

Cool.

I see the workload has increased. Looking forward to this! I presume css animation will have a positive impact on dragging speed/fluency?.

AshesOfOwls commented 10 years ago

Most likely/hopefully. I am also expecting a huge improvement on mobile devices.

senner007 commented 10 years ago

Oh good.

I've been meesing around with css animations my self a bit. The optimal way seems, to the best of my knowledge, to use x, y and not left, top for movement. This is to enable hardware accelerated rendering on tablet devices.

I hope you finish soon. It is going to be a very useful plugin for multiple purposes.

AshesOfOwls commented 10 years ago

I'll try the X & Y, I forget that was even an option. Thanks!

AshesOfOwls commented 10 years ago

I can't seem to find any reference to X & Y being a valid CSS attribute. Do you happen to know where the documentation is about that Senner?

senner007 commented 10 years ago

Hi again. The property is called transform : translate (x,y) Now there are two ways of calling an animation in css, transition and animation. I don't really understand the difference, and I have been planning to read up on this some time soon. I think the property called transition is suitable. Here's a link for a detailed explanation.

http://webdesign.tutsplus.com/tutorials/htmlcss-tutorials/css3-transitions-and-transforms-from-scratch/

I'll get back to you when I have more knowledge of this.

AshesOfOwls commented 10 years ago

Works great, thanks!