Animation Timeline
The animation timeline component, prefixed by gds-anim-timeline
, provides a clear visualization of interactive animation keyframes on a stage.
0s
1s
2s
3s
4s
5s
<div class="gds-anim-timeline">
<div class="gds-anim-timeline__row gds-anim-timeline__row--darkblue">
<div class="gds-anim-timeline__cell--asset">
<div class="gds-anim-timeline__color-cap"></div>
<div class="gds-anim-timeline__asset-preview">
<label class="gds-anim-timeline__label">A very long name goes here</label>
<div class="gds-anim-timeline__asset-avatar"></div>
</div>
<div class="gds-anim-timeline__asset-animations">
<div class="gds-anim-timeline__form-group">
<div class="gds-anim-timeline__input-group">
<select class="gds-anim-timeline__select-input">
<option>Slide In Left</option>
<option>Slide In Right</option>
</select>
<button class="gds-anim-timeline__button gds-anim-timeline__button--remove" title="Remove this animation"><i class="fa fa-trash"></i></button>
</div>
<button class="gds-anim-timeline__button gds-anim-timeline__button--add" title="Add an animation"><i class="fa fa-plus"></i></button>
</div>
</div>
</div>
<div class="gds-anim-timeline__cell--stage">
<div class="gds-anim-timeline__bar-line"></div>
<div class="gds-anim-timeline__bar-line"></div>
<div class="gds-anim-timeline__bar-line"></div>
<div class="gds-anim-timeline__bar-line"></div>
<div class="gds-anim-timeline__bar-line"></div>
<div class="gds-anim-timeline__bar-line"></div>
<div class="gds-anim-timeline__bar-line"></div>
<div class="gds-anim-timeline__bar-line"></div>
<div class="gds-anim-timeline__bar-line"></div>
<div class="gds-anim-timeline__bar-line"></div>
<div class="gds-anim-timeline__bar-line"></div>
<div class="gds-anim-timeline__bar-line"></div>
<div class="gds-anim-timeline__bar-line"></div>
<div class="gds-anim-timeline__bar-line"></div>
<div class="gds-anim-timeline__bar-line"></div>
<div class="gds-anim-timeline__bar-line"></div>
<div class="gds-anim-timeline__bar-line"></div>
<div class="gds-anim-timeline__bar-line"></div>
<div class="gds-anim-timeline__bar-line"></div>
<section class="gds-anim-timeline__section">
<div class="gds-anim-timeline__bar" style="left: 5%; width: 20%;">
<div class="gds-anim-timeline__bar-handle"></div>
<div class="gds-anim-timeline__bar-handle"></div>
</div>
</section>
<div class="gds-anim-timeline__scale gds-anim-timeline__scale--top">
<div class="gds-anim-timeline__value-marker">
<div class="gds-anim-timeline__value-label">0s</div>
</div>
<div class="gds-anim-timeline__value-marker">
<div class="gds-anim-timeline__value-label">1s</div>
</div>
<div class="gds-anim-timeline__value-marker">
<div class="gds-anim-timeline__value-label">2s</div>
</div>
<div class="gds-anim-timeline__value-marker">
<div class="gds-anim-timeline__value-label">3s</div>
</div>
<div class="gds-anim-timeline__value-marker">
<div class="gds-anim-timeline__value-label">4s</div>
</div>
<div class="gds-anim-timeline__value-marker">
<div class="gds-anim-timeline__value-label">5s</div>
</div>
</div>
</div>
</div>
<div class="gds-anim-timeline__row gds-anim-timeline__row--gold">
<div class="gds-anim-timeline__cell--asset">
<div class="gds-anim-timeline__color-cap"></div>
<div class="gds-anim-timeline__asset-preview">
<label class="gds-anim-timeline__label">A very long name goes here</label>
<div class="gds-anim-timeline__asset-avatar"></div>
</div>
<div class="gds-anim-timeline__asset-animations">
<div class="gds-anim-timeline__form-group">
<div class="gds-anim-timeline__input-group">
<select class="gds-anim-timeline__select-input">
<option>Slide In Left</option>
<option>Slide In Right</option>
</select>
<button class="gds-anim-timeline__button gds-anim-timeline__button--remove" title="Remove this animation"><i class="fa fa-trash"></i></button>
</div>
</div>
<div class="gds-anim-timeline__form-group">
<div class="gds-anim-timeline__input-group">
<select class="gds-anim-timeline__select-input">
<option>Slide In Left</option>
<option>Slide In Right</option>
</select>
<button class="gds-anim-timeline__button gds-anim-timeline__button--remove" title="Remove this animation"><i class="fa fa-trash"></i></button>
</div>
</div>
<div class="gds-anim-timeline__form-group">
<div class="gds-anim-timeline__input-group">
<select class="gds-anim-timeline__select-input">
<option>Slide In Left</option>
<option>Slide In Right</option>
</select>
<button class="gds-anim-timeline__button gds-anim-timeline__button--remove" title="Remove this animation"><i class="fa fa-trash"></i></button>
</div>
</div>
<div class="gds-anim-timeline__form-group">
<div class="gds-anim-timeline__input-group">
<select class="gds-anim-timeline__select-input">
<option>Slide In Left</option>
<option>Slide In Right</option>
</select>
<button class="gds-anim-timeline__button gds-anim-timeline__button--remove" title="Remove this animation"><i class="fa fa-trash"></i></button>
</div>
</div>
<div class="gds-anim-timeline__form-group">
<div class="gds-anim-timeline__input-group">
<select class="gds-anim-timeline__select-input">
<option>Slide In Left</option>
<option>Slide In Right</option>
</select>
<button class="gds-anim-timeline__button gds-anim-timeline__button--remove" title="Remove this animation"><i class="fa fa-trash"></i></button>
</div>
</div>
<div class="gds-anim-timeline__form-group">
<div class="gds-anim-timeline__input-group">
<select class="gds-anim-timeline__select-input">
<option>Rotate In Left</option>
<option>Rotate In Right</option>
</select>
<button class="gds-anim-timeline__button gds-anim-timeline__button--remove" title="Remove this animation"><i class="fa fa-trash"></i></button>
</div>
<button class="gds-anim-timeline__button gds-anim-timeline__button--add" title="Add an animation"><i class="fa fa-plus"></i></button>
</div>
</div>
</div>
<div class="gds-anim-timeline__cell--stage">
<div class="gds-anim-timeline__bar-line"></div>
<div class="gds-anim-timeline__bar-line"></div>
<div class="gds-anim-timeline__bar-line"></div>
<div class="gds-anim-timeline__bar-line"></div>
<div class="gds-anim-timeline__bar-line"></div>
<div class="gds-anim-timeline__bar-line"></div>
<div class="gds-anim-timeline__bar-line"></div>
<div class="gds-anim-timeline__bar-line"></div>
<div class="gds-anim-timeline__bar-line"></div>
<div class="gds-anim-timeline__bar-line"></div>
<div class="gds-anim-timeline__bar-line"></div>
<div class="gds-anim-timeline__bar-line"></div>
<div class="gds-anim-timeline__bar-line"></div>
<div class="gds-anim-timeline__bar-line"></div>
<div class="gds-anim-timeline__bar-line"></div>
<div class="gds-anim-timeline__bar-line"></div>
<div class="gds-anim-timeline__bar-line"></div>
<div class="gds-anim-timeline__bar-line"></div>
<div class="gds-anim-timeline__bar-line"></div>
<section class="gds-anim-timeline__section">
<div class="gds-anim-timeline__bar" style="left: 5%; width: 20%;">
<div class="gds-anim-timeline__bar-handle"></div>
<div class="gds-anim-timeline__bar-handle"></div>
</div>
</section>
<section class="gds-anim-timeline__section">
<div class="gds-anim-timeline__bar" style="left: 10%; width: 25%;">
<div class="gds-anim-timeline__bar-handle"></div>
<div class="gds-anim-timeline__bar-handle"></div>
</div>
</section>
<section class="gds-anim-timeline__section">
<div class="gds-anim-timeline__bar" style="left: 50%; width: 20%;">
<div class="gds-anim-timeline__bar-handle"></div>
<div class="gds-anim-timeline__bar-handle"></div>
</div>
</section>
<section class="gds-anim-timeline__section">
<div class="gds-anim-timeline__bar" style="left: 50%; width: 20%;">
<div class="gds-anim-timeline__bar-handle"></div>
<div class="gds-anim-timeline__bar-handle"></div>
</div>
</section>
<section class="gds-anim-timeline__section">
<div class="gds-anim-timeline__bar" style="left: 50%; width: 20%;">
<div class="gds-anim-timeline__bar-handle"></div>
<div class="gds-anim-timeline__bar-handle"></div>
</div>
</section>
<section class="gds-anim-timeline__section">
<div class="gds-anim-timeline__bar" style="left: 55%; width: 15%;">
<div class="gds-anim-timeline__bar-handle"></div>
<div class="gds-anim-timeline__bar-handle"></div>
</div>
</section>
</div>
</div>
</div>