Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

docs: add section about plugins options and improve examples in Motion UI docs #11435

Merged
merged 2 commits into from
Aug 9, 2018
Merged

docs: add section about plugins options and improve examples in Motion UI docs #11435

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
b08a56d
docs: move Motion UI Toggler example to its own section
ncoden Aug 5, 2018
bd4bf11
docs: add a simpler example in Motion UI docs header
ncoden Aug 5, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
64 changes: 42 additions & 22 deletions docs/pages/motion-ui.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,32 +6,16 @@ library:
docs: https://github.com/zurb/motion-ui/tree/master/docs
---

Motion UI is a standalone library that powers the transition effects used in a number of Foundation components, including [Toggler](toggler.html), [Reveal](reveal.html), and [Orbit](orbit.html). The transitions are powered by special transition classes that the Motion UI Sass creates. For example, here are two instances of Toggler—one using fade classes (`.fade-in` and `.fade-out`), and one using slide classes (`.slide-in-down` and `.slide-out-up`).
Motion UI is a standalone library that powers the transition effects used in a number of Foundation components, including [Toggler](toggler.html), [Reveal](reveal.html), and [Orbit](orbit.html).

```html
<div data-toggler data-animate="fade-in fade-out" class="callout secondary">
<p>This panel fades.</p>
</div>

<div data-toggler data-animate="slide-in-down slide-out-up" class="callout secondary">
<p>This panel slides.</p>
</div>
```

<button type="button" class="button" data-toggle="motion-example-1">Fade</button><button type="button" class="button" data-toggle="motion-example-2">Slide</button>
<div class="grid-x grid-margin-x">
<div class="cell small-6">
<div data-toggler data-animate="fade-in fade-out" class="callout secondary ease" id="motion-example-1">
<p>This panel <strong>fades</strong>.</p>
</div>
</div>
<div class="cell small-6">
<div data-toggler data-animate="slide-in-down slide-out-up" class="callout secondary ease" id="motion-example-2">
<p>This panel <strong>slides</strong>.</p>
</div>
<div class="text-center">
<button type="button" class="button" data-toggle="motion-header-example">Animate!</button>
<div data-toggler data-animate="fade-in fade-out" id="motion-header-example" style="display: none;">
<img src="/assets/img/generic/rectangle-7.jpg" style="width: 100%;">
</div>
</div>


---

## Installing
Expand Down Expand Up @@ -78,6 +62,42 @@ Or, another way to start using Motion UI is through a CDN.

---

## Usage in Components

Various Foundation components provide options for to use Motion UI animations when changing state. Here are the options for each plugin that support Motion UI:
- [Orbit](orbit.html): `data-animate`
- [Reveal](reveal.html): `data-animation-in`, `data-animation-out`
- [Toggler](toggler.html): `data-animate`
- [Responsive Toggler](responsive-navigation.html): `data-animate`

For example, here are two instances of Toggler&mdash;one using fade classes (`.fade-in` and `.fade-out`), and one using slide classes (`.slide-in-down` and `.slide-out-up`). See all availaible classes in [build-in transitions](#built-in-transitions) below.

```html
<div data-toggler data-animate="fade-in fade-out" class="callout secondary">
<p>This panel fades.</p>
</div>

<div data-toggler data-animate="slide-in-down slide-out-up" class="callout secondary">
<p>This panel slides.</p>
</div>
```

<button type="button" class="button" data-toggle="motion-example-1">Fade</button><button type="button" class="button" data-toggle="motion-example-2">Slide</button>
<div class="grid-x grid-margin-x">
<div class="cell small-6">
<div data-toggler data-animate="fade-in fade-out" class="callout secondary ease" id="motion-example-1">
<p>This panel <strong>fades</strong>.</p>
</div>
</div>
<div class="cell small-6">
<div data-toggler data-animate="slide-in-down slide-out-up" class="callout secondary ease" id="motion-example-2">
<p>This panel <strong>slides</strong>.</p>
</div>
</div>
</div>

---

## Built-in Transitions

Motion UI includes more than two dozen built-in transition classes. They can be enabled by adding this line to your Sass file, after you've imported the library:
Expand Down