EricHripko
Just a tip/idea/opinion
Hi,
This is a tip/suggestion/idea/share of though kind of message.
I had a brief look at your tags. They look very nice, keep on the good work. I am also trying to implement the Material Design into my CMS, although I'm only using principles and not the (google) material design. The most interesting part of material design to me was the animation and transition, something that I was trying to implement in my application when there were no Android or material design around.
Now, animation and transition between different app states or even a single component states is kind of hard to implement and tricky. For example: a button transforms into a popup or card when clicked, or transition between forms in general, transition between different states (Saving, loading, deleting ...) and etc
It would be great if you can built these into your library in a way that it flows the MD principle and also transparent to the developer.
For example if a button opens up a dialog, it should automatically transform into that dialog, or form automatically transform into save state if it's submitting data.
I know these are vary hard to implement, but among the MD libraries that I saw, almost all of them lacks hugely in animation and transition part and having this feature/principle built-in in a library would be a great boost for that library.
if I want to say my idea directly, it would be: Build a library that focuses on animation and transition part of MD, because the rest has been already created many times before and they lack this feature/principle
Kind regards
Hi Eliya!
Thanks for having a look at my project! I am definitely trying my best to implement Material animation and transitions in my elements. I do keep this thing in mind and do have a couple of ideas on how to implement at least the pre-defined transitions from spec nicely (e.g., FAB into the Toolbar or Chip into Menu with avatars).
Implementing reveal animation for other elements is complex, but I think quite possible with custom elements (especially cos they can share functionality).
What I am still baffled about is how to implement another type of animation - where, for example, Avatar transitions into a Hero image once the appropriate menu item is selected.
In other words, I will definitely allocate a lot of my efforts to making animations and transitions look right once I start making the other elements (like FAB). Speaking about it, I am finishing off Text Fields this week and will hopefully start implementing FAB and appropriate animations (transforming into toolbar, unwinding list of contacts) next week.
Thanks again for checking out the project and you are more than welcome to contribute if you have time and willingness to do so :)
Hi, I'm vary happy to hear that.
I really like to contribute but unfortunately I'm very busy with some projects at moment {deadlines are close :D} But as soon as I get some free time, I will be glad to share my help :)
Had pretty busy couple of weeks as well.
Posting here to keep the issue updated. Below is the link of the recently implemented morph animation. It is of course really in alpha stage and the moment, but I think it performs the animation in the most generic and truthful (as much as web allows it) way possible. http://gfycat.com/PleasantFantasticDugong
Nice, great work
WARNING: Everything here is opinion based :)
Check out https://greensock.com/tweenlite for more advanced options. I know that you are trying to keep it as pure as possible. But if it is possible to use a js library for more advanced animation then it would be great.
During developing of my CMS, I found the following transition very often:
Button -> Dialog transform Dialog -> Button transform ListItem -> Dialog transform ListItem -> Card transform Card -> Card explode Button -> Card transform / scale
Now, according to these use cases, I come up with these solutions:
Imagine there is a element called <x-base-component type='button'>
By changing the type of this element to card, it should transform into a card.
AND/OR
You have a element <x-state-container active-state='button'> and inside this element you have a card and a button elements. By changing the active-state to card, the button should transform to the card. So <x-state-container> can has as many child as it want, and it only handle the animation between current active state and previous one.
With this solution you can also have your DOM pre-loaded and only show the current active state.
The benefit of these solutions is that they don't need any coding by the end user developer.
Please share your though and let me know what you think :)
Hey, thanks for all your input so far and the.comment above!
I have briefly looked at the tweenlite library, but I need to look into it further to see if extra dependency is justified.
All right, it is really interesting to see which transitions are frequently used. I would look ve to check out these live/recorded somewhere to if this is possible.
Did you check out the way morph animation is implemented? I feel that most of the concepts you are mentioning are already implemented in imperative style. The way animation works right now is: moves parent to the centre of target element, creates an ink spill over the parent that fills the space for the target element, fades the target in from under spill layer. So, the animation doesn't make any assumptions about elements apart from requiring them to be absolutely positioned.
Now, specifying the animation declaratively is a really great idea and I will look into doing it this way. The reason being that it resolves the problem of non-absolute positioned elements and makes it easier to use.
yes, I checked the ink spill. it is very good and very generic. I try to create some video of the transitions that I use in my CMS. Right now I have a challenge and that is scaling a div height to it's content height. Wjenever i solve that i will make some screen video of it for you.