Animations

Animation classes

01

The intended use of this is in content block components. Developers can add the class of .rc-animation-001--base to all content block components and apply the .rc-animation-001--active as needed to produce a subtle fade in effect. Developers can choose how/when to apply the .rc-animation-001--active class.

001 base
html
            <div class="rc-animation-001--base">001 base</div>
        
001 active
html
            <div class="rc-animation-001--base rc-animation-001--active">001 active</div>
        

Issues

If you are having problems implementing this code, please submit an issue on our Github page.

Github Octocat

Feedback

If you would like to offer feedback on the design of this component, please send an email requesting access to the Design Language Slack channel.

Slack logo

Changelog

  • 17th September 2018 [ui_assets/visual_styles/animations.yml]
    spelling/ grammar
  • 23rd August 2018 [ui_assets/visual_styles/animations.yml]
    Amend typo on animation page rc-animation-001--active not rc-animation-001--activate.
  • 15th August 2018 [ui_assets/visual_styles/animations.yml]
    add first animation docs