Basic¶

Description: The animations Object groups animation instances together in which each child Object is treated as a separate animation instance. If a name property is not defined in the animation instance, its Object key is used as the <identifier>.

ctr('.test', {
  width: 200px
  animations: {
    one: {
      name: meanMrMustard
      timeline: {
        '50%': {
          background: green
        }
      }
    }
    // key becomes timeline name
    two: {
      timeline: {
        '50%': {
          color: green
        }
      }
    }
  }
})

.test:
  width: 200px
  animations:
    one:
      name: meanMrMustard
      timeline:
        50%:
          background: green
    # key becomes timeline name
    two:
      timeline:
        50%:
          color: green

.test {
  width: 200px;
  animation-delay: 0s, 0s;
  animation-duration: 0.5s, 0.5s;
  animation-fill-mode: none, none;
  animation-iteration-count: 1, 1;
  animation-name: meanMrMustard, two;
  animation-direction: normal, normal;
  animation-play-state: running, running;
  animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1), cubic-bezier(0.42, 0, 0.58, 1);
}
@keyframes meanMrMustard {
  50% {
    background: #008000;
  }
}
@keyframes two {
  50% {
    color: #008000;
  }
}

ctr('.test', {
  width: 200px
  animations: {
    one: {
      name: meanMrMustard
      timeline: {
        '50%': {
          background: green
        }
      }
    }
    // key becomes timeline name
    two: {
      timeline: {
        '50%': {
          color: green
        }
      }
    }
  }
})

.test {
  width: 200px;
  animation-delay: 0s, 0s;
  animation-duration: 0.5s, 0.5s;
  animation-fill-mode: none, none;
  animation-iteration-count: 1, 1;
  animation-name: meanMrMustard, two;
  animation-direction: normal, normal;
  animation-play-state: running, running;
  animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1), cubic-bezier(0.42, 0, 0.58, 1);
}
@keyframes meanMrMustard {
  50% {
    background: #008000;
  }
}
@keyframes two {
  50% {
    color: #008000;
  }
}

.test:
  width: 200px
  animations:
    one:
      name: meanMrMustard
      timeline:
        50%:
          background: green
    # key becomes timeline name
    two:
      timeline:
        50%:
          color: green

Notes

• The <identifier> for the animation-name property can be defined in an individual timeline Object otherwise the <identifier> defaults to the object key

Common Option¶

Description: A common Object can be defined in the animations Object to specify common values used by all animation instances.

ctr('.test', {
  width: 200px
  animations: {
    // merged into each animation
    common: {
      option: {
        state: paused
        duration: 1s
      }
    }
    making-magic: {
      timeline: {
        '50%': {
          background: green
        }
      }
    }
    regularly: {
      option: {
        // trumps common
        duration: 22s
      }
      timeline: {
        '50%': {
          color: green
        }
      }
    }
  }
})

.test:
  width: 200px
  animations:
    # merged into each animation
    common:
      option:
        state: paused
        duration: 1s
    making-magic:
      timeline:
        50%:
          background: green
    regularly:
      option:
        # trumps common
        duration: 22s
      timeline:
        50%:
          color: green

.test {
  width: 200px;
  animation-delay: 0s, 0s;
  animation-duration: 1s, 22s;
  animation-fill-mode: none, none;
  animation-iteration-count: 1, 1;
  animation-direction: normal, normal;
  animation-play-state: paused, paused;
  animation-name: making-magic, regularly;
  animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1), cubic-bezier(0.42, 0, 0.58, 1);
}
@keyframes making-magic {
  50% {
    background: #008000;
  }
}
@keyframes regularly {
  50% {
    color: #008000;
  }
}

ctr('.test', {
  width: 200px
  animations: {
    // merged into each animation
    common: {
      option: {
        state: paused
        duration: 1s
      }
    }
    making-magic: {
      timeline: {
        '50%': {
          background: green
        }
      }
    }
    regularly: {
      option: {
        // trumps common
        duration: 22s
      }
      timeline: {
        '50%': {
          color: green
        }
      }
    }
  }
})

.test {
  width: 200px;
  animation-delay: 0s, 0s;
  animation-duration: 1s, 22s;
  animation-fill-mode: none, none;
  animation-iteration-count: 1, 1;
  animation-direction: normal, normal;
  animation-play-state: paused, paused;
  animation-name: making-magic, regularly;
  animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1), cubic-bezier(0.42, 0, 0.58, 1);
}
@keyframes making-magic {
  50% {
    background: #008000;
  }
}
@keyframes regularly {
  50% {
    color: #008000;
  }
}

.test:
  width: 200px
  animations:
    # merged into each animation
    common:
      option:
        state: paused
        duration: 1s
    making-magic:
      timeline:
        50%:
          background: green
    regularly:
      option:
        # trumps common
        duration: 22s
      timeline:
        50%:
          color: green

Notes

• common alias: global
• Option priority: local > common > default

Omit¶

Description: A List value for the omit option property in an Object animation instance omits specific common values from being merged into the instance. The omit value is defined by the property path relative to the common Object.

ctr('.test', {
  width: 200px
  animations: {
    common: {
      option: {
        duration: 1s
        direction: 'foward'
      }
    }
    one: {
      timeline: {
        '50%': {
          background: green
        }
      }
    }
    two: {
      option: {
        // omits the direction
        omit: 'option.direction'
      }
      timeline: {
        '50%': {
          color: green
        }
      }
    }
  }
})

.test:
  width: 200px
  animations:
    common:
      option:
        duration: 1s
        direction: foward
    one:
      timeline:
        50%:
          background: green
    two:
      option:
        # omits the direction
        omit: option.direction
      timeline:
        50%:
          color: green

.test {
  width: 200px;
  animation-delay: 0s, 0s;
  animation-name: one, two;
  animation-duration: 1s, 1s;
  animation-fill-mode: none, none;
  animation-iteration-count: 1, 1;
  animation-direction: foward, normal;
  animation-play-state: running, running;
  animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1), cubic-bezier(0.42, 0, 0.58, 1);
}
@keyframes one {
  50% {
    background: #008000;
  }
}
@keyframes two {
  50% {
    color: #008000;
  }
}

ctr('.test', {
  width: 200px
  animations: {
    common: {
      option: {
        duration: 1s
        direction: 'foward'
      }
    }
    one: {
      timeline: {
        '50%': {
          background: green
        }
      }
    }
    two: {
      option: {
        // omits the direction
        omit: 'option.direction'
      }
      timeline: {
        '50%': {
          color: green
        }
      }
    }
  }
})

.test {
  width: 200px;
  animation-delay: 0s, 0s;
  animation-name: one, two;
  animation-duration: 1s, 1s;
  animation-fill-mode: none, none;
  animation-iteration-count: 1, 1;
  animation-direction: foward, normal;
  animation-play-state: running, running;
  animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1), cubic-bezier(0.42, 0, 0.58, 1);
}
@keyframes one {
  50% {
    background: #008000;
  }
}
@keyframes two {
  50% {
    color: #008000;
  }
}

.test:
  width: 200px
  animations:
    common:
      option:
        duration: 1s
        direction: foward
    one:
      timeline:
        50%:
          background: green
    two:
      option:
        # omits the direction
        omit: option.direction
      timeline:
        50%:
          color: green

Notes

• Only omit values are excluded
• Conversely, the pick option property is the inverse, in that only pick values are merged
• Lookup is performed through the lodash _.get Function via dot notation: <path>.<to>.<omit>.<property>

Pick¶

Description: A List value for the pick option property in an Object animation instance picks specific common values to be merged into the instance. The pick value is defined by the property path relative to the common Object.

ctr('.test', {
  width: 200px
  animations: {
    common: {
      option: {
        duration: 1s
        direction: 'foward'
      }
    }
    one: {
      timeline: {
        '50%': {
          background: green
        }
      }
    }
    two: {
      option: {
        // only picks the duration
        pick: 'option.duration'
      }
      timeline: {
        '50%': {
          color: green
        }
      }
    }
  }
})

.test:
  width: 200px
  animations:
    common:
      option:
        duration: 1s
        direction: foward
    one:
      timeline:
        50%:
          background: green
    two:
      option:
        # only picks the duration
        pick: option.duration
      timeline:
        50%:
          color: green

.test {
  width: 200px;
  animation-delay: 0s, 0s;
  animation-name: one, two;
  animation-duration: 1s, 1s;
  animation-fill-mode: none, none;
  animation-iteration-count: 1, 1;
  animation-direction: foward, normal;
  animation-play-state: running, running;
  animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1), cubic-bezier(0.42, 0, 0.58, 1);
}
@keyframes one {
  50% {
    background: #008000;
  }
}
@keyframes two {
  50% {
    color: #008000;
  }
}

ctr('.test', {
  width: 200px
  animations: {
    common: {
      option: {
        duration: 1s
        direction: 'foward'
      }
    }
    one: {
      timeline: {
        '50%': {
          background: green
        }
      }
    }
    two: {
      option: {
        // only picks the duration
        pick: 'option.duration'
      }
      timeline: {
        '50%': {
          color: green
        }
      }
    }
  }
})

.test {
  width: 200px;
  animation-delay: 0s, 0s;
  animation-name: one, two;
  animation-duration: 1s, 1s;
  animation-fill-mode: none, none;
  animation-iteration-count: 1, 1;
  animation-direction: foward, normal;
  animation-play-state: running, running;
  animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1), cubic-bezier(0.42, 0, 0.58, 1);
}
@keyframes one {
  50% {
    background: #008000;
  }
}
@keyframes two {
  50% {
    color: #008000;
  }
}

.test:
  width: 200px
  animations:
    common:
      option:
        duration: 1s
        direction: foward
    one:
      timeline:
        50%:
          background: green
    two:
      option:
        # only picks the duration
        pick: option.duration
      timeline:
        50%:
          color: green

Notes

• Only pick values are merged and all other values are excluded
• Conversely, the omit option property is the inverse, in that only omit values are exculed from the merge
• Lookup is performed through the lodash _.get Function via dot notation: <path>.<to>.<pick>.<property>

Target¶

Description: A List value for the target option property in the common Object specifies specific animation instances to merge with.

ctr('.test', {
  width: 200px
  animations: {
    common: {
      option: {
        duration: 1s
        direction: 'foward'
        // only merges with "two"
        target: 'two'
      }
    }
    one: {
      timeline: {
        '50%': {
          background: green
        }
      }
    }
    two: {
      timeline: {
        '50%': {
          color: green
        }
      }
    }
  }
})

.test:
  width: 200px
  animations:
    common:
      option:
        duration: 1s
        direction: foward
        # only merges with "two"
        target: two
    one:
      timeline:
        50%:
          background: green
    two:
      timeline:
        50%:
          color: green

.test {
  width: 200px;
  animation-delay: 0s, 0s;
  animation-name: one, two;
  animation-duration: 0.5s, 1s;
  animation-fill-mode: none, none;
  animation-iteration-count: 1, 1;
  animation-direction: normal, foward;
  animation-play-state: running, running;
  animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1), cubic-bezier(0.42, 0, 0.58, 1);
}
@keyframes one {
  50% {
    background: #008000;
  }
}
@keyframes two {
  50% {
    color: #008000;
  }
}

ctr('.test', {
  width: 200px
  animations: {
    common: {
      option: {
        duration: 1s
        direction: 'foward'
        // only merges with "two"
        target: 'two'
      }
    }
    one: {
      timeline: {
        '50%': {
          background: green
        }
      }
    }
    two: {
      timeline: {
        '50%': {
          color: green
        }
      }
    }
  }
})

.test {
  width: 200px;
  animation-delay: 0s, 0s;
  animation-name: one, two;
  animation-duration: 0.5s, 1s;
  animation-fill-mode: none, none;
  animation-iteration-count: 1, 1;
  animation-direction: normal, foward;
  animation-play-state: running, running;
  animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1), cubic-bezier(0.42, 0, 0.58, 1);
}
@keyframes one {
  50% {
    background: #008000;
  }
}
@keyframes two {
  50% {
    color: #008000;
  }
}

.test:
  width: 200px
  animations:
    common:
      option:
        duration: 1s
        direction: foward
        # only merges with "two"
        target: two
    one:
      timeline:
        50%:
          background: green
    two:
      timeline:
        50%:
          color: green

Notes

• An instance is defined by its Object key
• The intended purpose is to aid in debugging
• If an animation instance is not defined in the List, it’s not merged with the common Object

True Value¶

Description: A true Boolean value for an Object animation instance inherits the common Object value.

ctr('.test', {
  width: 200px
  animations: {
    common: {
      timeline: {
        '50%': {
          color: green
        }
      }
    }
    one: {
      option: {
        duration: 1s
        direction: 'foward'
      }
      timeline: {
        '25%': {
          background: green
        }
      }
    }
    // inherits common
    two: true
  }
})

.test:
  width: 200px
  animations:
    common:
      timeline:
        50%:
          color: green
    one:
      option:
        duration: 1s
        direction: foward
      timeline:
        25%:
          background: green
    # inherits common
    two: true

.test {
  width: 200px;
  animation-delay: 0s, 0s;
  animation-name: one, two;
  animation-duration: 1s, 0.5s;
  animation-fill-mode: none, none;
  animation-iteration-count: 1, 1;
  animation-direction: foward, normal;
  animation-play-state: running, running;
  animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1), cubic-bezier(0.42, 0, 0.58, 1);
}
@keyframes one {
  25% {
    background: #008000;
  }
  50% {
    color: #008000;
  }
}
@keyframes two {
  50% {
    color: #008000;
  }
}

ctr('.test', {
  width: 200px
  animations: {
    common: {
      timeline: {
        '50%': {
          color: green
        }
      }
    }
    one: {
      option: {
        duration: 1s
        direction: 'foward'
      }
      timeline: {
        '25%': {
          background: green
        }
      }
    }
    // inherits common
    two: true
  }
})

.test {
  width: 200px;
  animation-delay: 0s, 0s;
  animation-name: one, two;
  animation-duration: 1s, 0.5s;
  animation-fill-mode: none, none;
  animation-iteration-count: 1, 1;
  animation-direction: foward, normal;
  animation-play-state: running, running;
  animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1), cubic-bezier(0.42, 0, 0.58, 1);
}
@keyframes one {
  25% {
    background: #008000;
  }
  50% {
    color: #008000;
  }
}
@keyframes two {
  50% {
    color: #008000;
  }
}

.test:
  width: 200px
  animations:
    common:
      timeline:
        50%:
          color: green
    one:
      option:
        duration: 1s
        direction: foward
      timeline:
        25%:
          background: green
    # inherits common
    two: true