3 Replies Latest reply on Feb 28, 2014 10:18 AM by logix812

    Dynamic Animation Assignment

    logix812

      I don't know if this is something Edge does, or if I just missed it outlined in the docs somewhere. In a project based on something like Marionette (or Backbone) AKA, I have a view/templating system. Is it possible for me to take an animation produced in Edge and assign the elements I would like it to appy to?

       

      Using Marionette as an example. Assume I have a CollectionView. I start adding models into the underlying Collection which will cause my ItemViews to be added and rendered to the browser. After an ItemView is rendered and shown, I would like to trigger a 'transition in' animation on elements within that view. 

       

      To put it in Edge terms. If I setup a few symbols and animate them, lets say: Title and Short Description. I would love to be able to reach in and say, "Hey, take all the timelines applied to this symbol and apply it to this element that I have chosen that represents my Title and take all of the timelines for this other symbol and apply them to my Short Description. All Applied? Now Play."

       

      After digging through the source, I'm guessing this is not readily achievable, but I thought I would ask to double check in case I was missing something.

        • 1. Re: Dynamic Animation Assignment
          logix812 Level 1

          I guess another way to look at it would be:

           

          I'd want each ItemView in the CollectionView to be a Stage unto itself, where each one plays the same animation.

           

          Right now I'm thinking the only way to do that is though an iframe that loads the edge animation bundle each time. Then setting up some kind of system to translate the model values into calls to the edge API to update the html values.

          • 2. Re: Dynamic Animation Assignment
            logix812 Level 1

            Ok.. I got something cooking.. Can anyone enumerate what these args actually stand for:

             

            Edge.P = function (_p, _st, _tt, _vt, _u)

             

            _p: Property

            _st: Looks like Start Value?

            _tt: the type of of change we are going to apply? for example on a translate, this value will be "transform" but on opacity it will be null.

             

            _vt: valueTemplate

            _u: units? Looks like it can be "px"

            • 3. Re: Dynamic Animation Assignment
              logix812 Level 1

              Ok, I got it solved at least at a proof of concept level. I wrote a utility to parse the <name>_edge.js file you get from publishing and I extract the animations and dynamically rebuild them along with a dynamic composition as I need them and then wrap them in a custom Marionette.Controller.

               

              With my limited testing it works like a champ.