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.