Animations with Metal

[mthadley]

What are the preferred ways of incorporating animations into a Metal app? Some animation interactions are easy and can be completely contained in a stylesheet. However, there are other situations (usually when removing a node), that we need some javascript as well.

I'm wondering if Metal already has any kind of API for working with animations, or if there should be one. Perhaps there are some framework agnostic libraries that would also be useful for Metal developers to know about.

For some example libraries, React has ReactCSSTransitionGroup and react-motion. I think Angular has ng-animate or something like that. Etc.

[mairatma]

You're right, animation handling can be useful.

From what I saw of ReactCSSTransitionGroup it would be simple to create a metal component to do something like that.

Motion seems more complicated, but in the end I think both would be usable via metal-react, though react-motion will require metal/metal-react#2 to be fixed first.

[bryceosterhaus]

Just a heads up, I am currently working on metal-css-transitions component that would be used similarly to ReactCSSTransitionGroup

[bryceosterhaus]

Here is the component I am working on. Just finishing up all use cases for testing. Go ahead and check out the demo. https://github.com/bryceosterhaus/metal-css-transitions

@mairatma any particular way we should use this? Should it be something that eventually goes under the metal organization or should we just work on it and maintain it separately?

[eduardolundgren]

Nice! I am wondering if instead of assuming intervals you can use https://github.com/metal/metal-anim to properly wait for transition/animation ends. Let me know if that make sense.

[mairatma]

I'm not entirely sure which way we should proceed with these jsx components. Initially we were just going to have a set of soy components, but now that jsx is being more widely used I'm just concerned that we'll end up with many projects to maintain here, and some could even be duplicated if we start adding jsx too. Besides, it will become harder to know if a repo uses jsx/soy without analysing the code if we start adding components for both.

What do you think @eduardolundgren? Maybe we could have a separate org for official jsx components, just to separate them. Or let most be independent components, only keeping some core ones inside the metal org (but then we may need some kind of naming convention so it's not so hard to know which are the soy components and which are the jsx ones).

As I said, not sure what the best path would be. Let me know if anyone has ideas for this too :)

[bryceosterhaus]

@mairatma is it possible to use a soy based component within a jsx based component? Such as using metal-modal within our Loop components which are jsx.

If so, I'm not totally sure it makes sense to separate them. But for jsx or soy specific components, we would specify that in the name itself, such as metal-jsx-transitions.

[eduardolundgren]

The ideal would be to both JSX, Soy compiles to common ICD (metal). Then, doesn't matter which template it's using they work between each other. This will require some changes from our side to make them compatible, it must be possible.

[mairatma]

It is, the only downside is that you'll be including more dependencies when you use soy as well (a not so small file which handles soy compiled files).

Also, though using soy components inside jsx is possible, it's not really possible to use jsx components inside soy, at least right now, since soy requires soy templates on its sub components. Maybe I could make that work, but I'm not sure yet since it's the soy compiler that throws errors when templates are missing. If we could convince them to stop throwing the errors somehow, maybe I could hack something in so this could work. I'll try to talk to them and see what I could do.

[eduardolundgren]

Imagine the following situation, the template it's being used will be compiled to ICD (metal). It's a compilation level dependency. After they are compiled, I can use the built version of JSX/Soy component regardless where they came from - of course if soy was involved we need to have the soy utils bundle built together. This would be an ideal scenario for using them from multiple templates.

[eduardolundgren]

If we make this work that would be cool.

[mairatma]

That's mostly how it works, the problem is just the soy compilation itself, as I said. The compiler throws errors if a template that is used inside soy doesn't exist, which will happen when soy calls a jsx component inside it. I think that if we can get rid of this error, it should be possible to go around the other problem (which is finding a jsx component from its name in the compiled js file, so that it can be rendered, but I have some ideas that should work there) :)

[eduardolundgren]

Okay, let's talk offline too if needed.

[bryceosterhaus]

I updated metal-css-transitions to use emulateTransitionEnd from metal-anim. This allows us to now not have to rely on explicit timeouts passed in. I have pushed it to a different branch for now.

Let me know what you guys think. metal-anim branch

[mairatma]

I agree that using metal-anim feels much better :)

[bryceosterhaus]

I just added the metal-anim version to our project and it seems to work great, thanks for the recommendation Eduardo.

Let me know if(and how) you want to move the repo under the metal org. Otherwise I will keep maintaining it under my repo and fix any bugs we encounter with it.

[mairatma]

This issue was moved to #10

[mairatma]

This issue was moved back.

[mthadley]

Given that Metal does not really have any strong positions on how this should be handled, and that there now exists a fairly stable library (metal-css-transitions), I think this issue can be safely closed. If anyone else has any new thoughts, they can create a new issue.

Thanks!