Animations

Oooo, pretty.

Not yet officially supported; Currently on target for v1.3.

Feel free to experiment with subtle animations, let us know if you do.

Using CSS3 and JavaScript animations there are many opportunities to make our sites look good and function better, but we want to take this one step at a time and get other items in order. As such, we've not included Foundation's Motion UI CSS in the default build.

If you'd like to use the Motion UI, you'll need //www.ebi.ac.uk/web_guidelines/EBI-Framework/v1.1/libraries/motion-ui/dist/motion-ui.min.css.

Example

Show more information

Animations HTML

<div class="callout warning">
  <p>Not yet officially supported; Currently on target for v1.3.</p>
  <span data-tooltip aria-haspopup="true" class="has-tip" data-disable-hover='false' tabindex=1 title="Foundation does have a complementary animation toolset that we’ve not bundled, but you could...">Feel free to experiment with subtle animations</span>, let us know if you do.
</div>

<p>Using CSS3 and JavaScript animations there are many opportunities to make our sites look good and function better, but we want to take this one step at a time and get other items in order. As such, we've not included <a href="http://foundation.zurb.com/sites/docs/motion-ui.html">Foundation's Motion UI</a> CSS in the default build.</p>

<p>If you'd like to use the Motion UI, you'll need <code><a href="https://www.ebi.ac.uk/web_guidelines/EBI-Framework/v1.1/libraries/motion-ui/dist/motion-ui.min.css">//www.ebi.ac.uk/web_guidelines/EBI-Framework/v1.1/libraries/motion-ui/dist/motion-ui.min.css</a></code>.</p>

<link rel="stylesheet" href="//www.ebi.ac.uk/web_guidelines/EBI-Framework/v1.1/libraries/motion-ui/dist/motion-ui.min.css" type="text/css" media="screen" />

<h3>Example</h3>
<div id="description-more" data-toggler data-animate="fade-in hinge-out-from-top" data-closable="hinge-out-from-top" style="display:none;">
  <div class="callout success">
    <button class="close-button" aria-label="Dismiss alert" type="button" data-close data-toggle="description-more show-more show-less">
      <span aria-hidden="true">&times;</span>
    </button>
    <p>Some extra information!</p>
  </div>
  <a class="small hide label" id="show-less" data-toggle="description-more show-more show-less" data-toggler=".hide"><span class="badge icon icon-functional" data-icon="-"></span> Show less information</a>
</div>

<a class="small label" id="show-more" data-toggle="description-more show-more show-less" data-toggler=".hide"><span class="badge icon icon-functional" data-icon="+"></span> Show more information</a>

Animations Style

You can find the original source of the CSS as .scss

Animations

  • Last updated: 29 Sep 2016
  • Source

Have a use case that's not covered?

Please open an issue in the tracker. We'll update this living pattern library with your feedback.

All patterns

See also

These resources will help you engage and understand the EBI Framework.