overview

We define tags, which are string values, and variants, which also string values, and for each frame we map tags to variant names.

The animation is a list of frames. For each frame, we each tag has one value. But, because we don’t want to define again, for each frame, the value of each tag, we only define the tags that change.

yml file

we have these keys :

- delay : the delay in ms between two frames
- tags : a list of possible tags
- variants : a list of possible ( `name`, `value`) pairs
- frames : a list of frames

A frame has keys :

- title
- toggles : a list of string, of the form `tag`@`variant name`

Example : git linear commit diagram.

see the yaml file

tags

we want to animate, eg change the colors of the nodes and eges of the diagram, so we define a tag for each of these items :

  tags: [ m1,m2,m3,m4,m5,m6,mr6,d1,d2,d3,dr1,dr2,dr3,em1m2, em2m3, em3m4, em4m5, em5m6,em6m7,em3d1,em5d1,ed1d2,ed2d3,ed3m6,em5dr1,edr3mr6 ,
  ed3dr1,edr1dr2,edr2dr3,edr3m6,em5mr6   ]

in this example, m<i> … are the nodes for the main branch, d<i> the nodes for the develop branch, and e<i><j> an edge from i to j

variants

in this example, each node can be :

• on (the commit is done)
• off (the commit is not done)
• from ( this is the previous commit)
• to ( this is the next commit )

same for edges…

  variants:
   - name: animate_edge
     value: 'class {tag} class_animate_edge; '
   - name: hidden_edge
     value: 'class {tag} class_hidden_edge;'
   - name: active_edge
     value: 'class {tag} class_active_edge;'
   - name: active_node
     value: 'class {tag} class_active_node; '
   - name: hidden_node
     value: 'class {tag} class_hidden_node; '
   - name: from_node
     value: 'class {tag} class_from_node; '
   - name: to_node
     value: 'class {tag} class_to_node; '
   - name: old_node
     value: 'class {tag} class_old_node; '
   - name: old_edge
     value: 'class {tag} class_old_edge; '

we define here the colors for nodes and edges, using classes. The syntax {tag} will allow to replace the tag with its value, for each frame

frames

we show here only two frames

    - title: |
        <h1 style="background-color:Lavender">
        checkout develop branch
        </h1>
      toggles: 
        - em2m3@active_edge
        - em3d1@animate_edge 
        - m2@active_node
        - m3@from_node
        - d1@to_node        

    - title: |
        <h1 style="background-color:Lavender">
        add commit in develop
        </h1>
      toggles: 
        - em3d1@active_edge
        - ed1d2@animate_edge 
        - m3@active_node
        - d1@from_node
        - d2@to_node            

• the title is an html element
• toggles is a list of tag that will change value. Tags not present here will keep the value of the previous frame.