Animations

CSS Animations

A lot can be done with CSS animations.

Card Attributes & Changes

Cards have their main, secondary, and background properties exposed as HTML attributes on the card. They also have their types, title, ciid, location, location-type, position, posX, and dulstclass there as well. These properties can also be used to target cards in CSS and animate them.

EX:

#c-189.card(data-type='unit', data-title='Mouse', data-ciid='189', data-location='me-hand', data-position='facedown', data-dulstclass='Mammal Rodent', data-name='Mouse', data-posx='1', data-elusive='1', data-cost='0', data-atk='1', data-health='1', style='z-index: 203; display: block; left: 432px; top: 540px; height: 102px; width: 82.2581px;', data-eligibletoplay='1')
  .card-inner
    img.mediaContent.media-content(src='https://d2t4fc8ff77neh.cloudfront.net/generatedImage/1cd9g9acl_6398596.jpg')
    .properties
      .property.mainProperty.main-property(data-name='cost', data-value='0')
        .data 0
      .property.mainProperty.main-property(data-name='atk', data-value='1')
        .data 1
      .property.mainProperty.main-property(data-name='health', data-value='1')
        .data 1
      .property.secondaryProperty(data-name='elusive', data-value='1')
        .data 1
      .property.backgroundProperty(data-name='posX', data-value='1')
        .data 1
      .property.location(data-name='location') hand
      .property.name(data-name='name') Mouse
      .property.backgroundProperty(data-name='eligibleToPlay', data-value='1')
        .data 1

Changes to cards

When the property values change, or is added, or is removed, there is a special change-/add-/remove- attribute created for 4 seconds. After 4 seconds the special attribute is removed.

EX: Here is the same card immediately after it's been played onto the board.

#c-192.card(data-type='unit', data-title='Mouse', data-ciid='192', data-location='me-board', data-position='faceup', data-dulstclass='Mammal Rodent', data-name='Mouse', data-posx='0', data-elusive='1', data-eligibletoplay='1', data-cost='0', data-atk='1', data-health='1', style='z-index: 202; display: block; left: 383.371px; top: 312px; height: 102px; width: 82.2581px;', change-data-location='board', change-data-position='faceup', change-data-posx='0', data-summoningsickness='1', add-data-summoningsickness='1', data-eligibletoattack='0', add-data-eligibletoattack='0')
  .card-inner(style='transform-origin: 50% 50%; transform: scale(1) rotateY(0deg) rotateX(0deg);')
    img.mediaContent.media-content(src='https://d2t4fc8ff77neh.cloudfront.net/generatedImage/1cd9g9acl_6398596.jpg')
    .properties
      .property.mainProperty.main-property(data-name='cost', data-value='0')
        .data 0
      .property.mainProperty.main-property(data-name='atk', data-value='1')
        .data 1
      .property.mainProperty.main-property(data-name='health', data-value='1')
        .data 1
      .property.secondaryProperty(data-name='elusive', data-value='1')
        .data 1
      .property.backgroundProperty(data-name='eligibleToPlay', data-value='1')
        .data 1
      .property.location(data-name='location') board
      .property.name(data-name='name') Mouse
      .property.backgroundProperty(data-name='summoningSickness', data-value='1')
        .data 1

There is now a change-data-location='board' attribute, signifying the move from the hand to the board, a add-data-summoningsickness='1' attribute, a add-data-eligibletoattack='0' attribute. These can all be used to select for CSS animations. Especially helpful for tying into entry and exit animations.

ui: animate

Card attributes

ui: animate action in the effect builder can be used to play complex animations that require javascript. When starting, set the attribute current-animation, and keep it for the duration of the animation. For example, the ram animation would set current-animation=ram.

Writing your own animations

Users on the enterprise plan can upload their own animations to /src/animations/ in addition to using the ones provided by Dulst. These animations would then be available in the effect builder, same as the default ones.