Declarative syntax for animation

Proposals
1

This idea came to me from How to animate changing numbers by counting (showing intermediate values) - #5 by jasonmit while building a solution to solve the above problem. The idea is simple… declaratively animate an attribute using just a handlebars helper.

For example:

{{x-modal y=(tween y duration=500 easing='linear')}}

// components/x-modal.hbs
<div class="modal-content" style="position: absolute; top: {{y}}px; .. ">
  Modal content
</div>

Now imagine you this.set('y', 100) and the value tweens from 0 to 100 in 500ms linearly stepping the top attribute causing it to animate. This opens up the possibilities of tweening a value that could be used to back an element attribute/style (color, height, x, y, etc.) without ever using velocity, $.animate, css animation.

Here is a working example of a progress bar using a proof of concept of the tween helper.

I would like some feedback or ideas on how this could be expanded further to be of more use, as I’m not an expert of animation.

And to be clear, this isn’t attempting to solve anything that liquid-fire already covers. This is simply for animating attributes/style properties of HTML elements or SVGs objects.

2 Likes
2

Where is this syntax to use a helper as a value of a component attribute from? I’ve never seen this anywhere or is this part of the concept? The example does not work for me.

3

It’s both a concept and was once a working example against a version of canary. Deps that are referenced have since changed.

4

Interesting, I’ve never seen an announcement for such a syntax and that’s why I wounder how this could ever have worked. However, I like the syntax. I have kind of another idea in mind:

{{some-comp animate={‘target’: ‘> button’, ‘animation’: ‘id-of-some-anim’, ‘event’: ‘hover’} }}

This should say: play animation ‘id-of-some-anim’ on ‘> button’ when the component is hovered. This would allow for a more declarative syntax like in Polymer. Problem is that I would need to provider a structured value like in your example but as far as I can see it’s only possible to provide strings and booleans and no arrays or objects or something like in your example as value.

5

Yeah the syntax is/was definitely possible, just a helper used as a subexpression which returns a stream (private API AFAIK).

/cc @thoov who I think ended up integrating this concept into an app using a stable branch.

He may be able to provide a more recent working example.

6

@vanthome Here is a working jsbin (http://jsbin.com/legosaduka/1/). It works with Ember 1.11 but in more recent versions it is not working.