Skip to content

Commit

Permalink
Release v2.0.0
Browse files Browse the repository at this point in the history
# Motion UI v2.0.0

We're happy to release Motion UI 2.0 with a better support of macOS Safari, API improvements, some bug fixes and various maintanance stuff.

## 🚀  Bidirectionals transitions/effects defaults

We changed the default direction of all transition and effect mixins so it depends on the `in` or `out` state. Calling the same mixin with `in` and `out` states now results in the same animation playing forward and backward.

💥 **BREAKING CHANGE**. We changed the effects and transitions API the following way:
* All direction-related options now have opposite values as defauls according to the `in` or `out` state.
* The `slide` effect defaults are now `left` and `right` (according to `$state`) for consistency with the `slide` transition.
* The `zoom` transition and effect defaults are now `0` and `1` (according to `$state`) for consistency with others transitions defaults.

### How to migrate

For the `hinge`, `slide`, `spin`, `zoom` effect functions and `mui-fade`, `mui-hinge`, `mui-slide`, `mui-spin`, `mui-zoom` transition mixins: if `$state: out` is used and no direction parameters are given, manually pass the "forward" parameters to keep them playing forward.

```scss
// Before
@include mui-fade($state: out /*, $from: 0, $to: 1*/);
// After
@include mui-fade($state: out, $from: 0, $to: 1);
```

For the `slide` effect function: if no `$direction` is given, manually pass `$direction: up` to keep the effect sliding to top instead of the new default `left`/`right`.

```scss
// Before
$effect: slide(/* $direction: up */);
// After
$effect: slide($direction: up);
```

For the `mui-zoom` transition mixin: if no `$from` or `$to` are given, manually pass `$from: 1.5` and `$to: 1` to keep the previous behavior.

```scss
// Before
@include mui-zoom(/* $from: 1.5, $to: 1 */);
// After
@include mui-zoom($from: 1.5, $to: 1);
```

## 🚀  New pausing behavior for `mui-queue` for Safari support

With the previous `mui-series` behavior, the serie was paused until the `.is-animating` class was added. Unfortately, the implementation behind this did not work on all macOS Safari versions and was even breaking the whole animation. In order to fully support macOS Safari, we changed the `mui-series` paused
behavior and introduced `.is-paused`.

💥 **BREAKING CHANGE**: When `.is-animating` is removed from `.mui-series`, the queue is now reset instead of paused. Setting `.is-animating` back will start the queue from its begining.

From now you can:
* **Start** the queue by adding `.is-animating`
* **Pause** the queue by adding `.is-paused`
* **Continue** the queue by removing `.is-paused`
* **Reset** the queue by removing `.is-animating`

### How to migrate

If you need an animation to pause midway, add `.is-paused` instead of removing `.is-animating`. For example in jQuery:

```js
// Before
function play($elem) {
  $elem.addClass('is-animating');
}
function pause($elem) {
  $elem.removeClass('is-animating');
}

// After
function play($elem) {
  $elem.addClass('is-animating').removeClass('is-paused');
}
function pause($elem) {
  $elem.addClass('is-paused');
}
function reset($elem) {
  $elem.removeClass('is-animating is-paused');
}
```

As a side-effect of this, standard animations names are not supported anymore as `mui-series` queues names. Make sure you use unique names for your `mui-series` queues.

```scss
// Before
@include mui-series {
  .shake          { @include mui-queue(3s, 0s, shake); }
  .spin           { @include mui-queue(3s, 0s, spin); }
}

// After
@include mui-series {
  .my-serie-shake { @include mui-queue(3s, 0s, shake); }
  .my-serie-spin  { @include mui-queue(3s, 0s, spin); }
}
```

## 🐛  Safer animation keyframes names for CSS

Fixes a bug when using decimals values for the `zoom` effect and transition arguments would generate an invalid CSS Keyframes name and break the animation.

We changed the way we validate arguments and generate keyframe in such a way that they will always have a valid CSS name for all effects, transitions and arguments passed in.

## 📄  All changes

* 💥  foundation#103 - Make transitions/effects directions depending on in/out state (@ncoden, closes foundation#83)
* 💥  foundation#108 - Change mui-series paused behavior for better Safari support (@ncoden, closes foundation#97)
* 🐛  foundation#100 - Fix deprecation warning for Sass 4.0 (@rediris, closes foundation#99)
* 🐛  foundation#102 - Make animation keyframes names safe for CSS (@ncoden, closes foundation#96)
* 🐛  foundation#109 - Ensure `-mui-keyframe-pct` returns a strintg instead of a list (@ncoden, closes foundation#109)
* 💻  foundation#110 - Update development dependencies to latest versions (@ncoden)
* 💻  foundation#112 - Ensure support of iOS Safari 7 and drop support for Android browser 2.3 (@ncoden)
* 💻  foundation#111 - Add Travis to run tests on `node-sass` 3/4/latest (@ncoden)
* 📖  foundation#94  - Fix parameter name for zoom animation (@cmarchena)

## 👩‍💻  Contributors

Thank you to the amazing people who contributed to this release:
* Carlos Marchena (@cmarchena)
* Kevin Ball (@kball)
* Nicolas Coden (@ncoden)
* Roman Edirisinghe (@rediris)
  • Loading branch information
ncoden committed May 21, 2018
1 parent e359303 commit fdcd346
Show file tree
Hide file tree
Showing 10 changed files with 464 additions and 176 deletions.
2 changes: 1 addition & 1 deletion .versions
Original file line number Diff line number Diff line change
Expand Up @@ -12,4 +12,4 @@ meteor@1.1.10
promise@0.5.1
random@1.0.5
underscore@1.0.4
zurb:motion-ui@1.3.0
zurb:motion-ui@2.0.0
2 changes: 1 addition & 1 deletion bower.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "motion-ui",
"version": "1.3.0",
"version": "2.0.0",
"authors": [
"ZURB <foundation@zurb.com>"
],
Expand Down
2 changes: 1 addition & 1 deletion composer.json
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
{
"name": "zurb/motion-ui",
"description": "Sass library for creating transitions and animations.",
"version": "1.3.0",
"version": "2.0.0",
"keywords": [
"css",
"sass",
Expand Down
Loading

0 comments on commit fdcd346

Please sign in to comment.