Menu icon Foundation
Motion UI - basic install issue

Hi All,

Am trying to create a working example from - Advanced Foundation | Lesson #103
http://zurb.com/university/lessons/create-custom-animations-and-transitions-with-motion-ui

The first step using "fadeIn" and "fadeOut" does not seem to work.

But step two, using 'hingeOut' and 'hingeIn' seems to be fine.

Am I missing something obvious.

Here is an example of the issue:
http://www.naked-dom.cpdev.net/

any help would be very grateful,

cheers

Dominique

// Foundation JavaScript
// Documentation can be found at: http://foundation.zurb.com/docs
$(document).foundation();



var $button = $('#button');
var $panel = $('#panel');

$button.click(function() {
  if ($panel.is(':visible')) {
    MotionUI.animateOut($panel, 'fadeOut');
  }
  else {
    MotionUI.animateIn($panel, 'fadeIn');
  }
});

var $button2 = $('#button2');
var $panel2 = $('#panel2');

$button2.click(function() {
  if ($panel2.is(':visible')) {
    MotionUI.animateOut($panel2, 'hingeOut');
  }
  else {
    MotionUI.animateIn($panel2, 'hingeIn');
  }
});


            

         

And here is the app.scss

  @import "settings";
@import "foundation";

.fish { text-align: left; }

@import "motion-ui";
@include motion-ui-transitions;


.hingeIn {
  @include mui-hinge(in);
}

.hingeOut {
  @include mui-hinge(out);
}

.chips { text-align: left; }


// Or selectively include components
// @import
//   "foundation/components/accordion",
//   "foundation/components/alert-boxes",
//   "foundation/components/block-grid",
//   "foundation/components/breadcrumbs",
//   "foundation/components/button-groups",
//   "foundation/components/buttons",
//   "foundation/components/clearing",
//   "foundation/components/dropdown",
//   "foundation/components/dropdown-buttons",
//   "foundation/components/flex-video",
//   "foundation/components/forms",
//   "foundation/components/grid",
//   "foundation/components/inline-lists",
//   "foundation/components/joyride",
//   "foundation/components/keystrokes",
//   "foundation/components/labels",
//   "foundation/components/magellan",
//   "foundation/components/orbit",
//   "foundation/components/pagination",
//   "foundation/components/panels",
//   "foundation/components/pricing-tables",
//   "foundation/components/progress-bars",
//   "foundation/components/reveal",
//   "foundation/components/side-nav",
//   "foundation/components/split-buttons",
//   "foundation/components/sub-nav",
//   "foundation/components/switches",
//   "foundation/components/tables",
//   "foundation/components/tabs",
//   "foundation/components/thumbs",
//   "foundation/components/tooltips",
//   "foundation/components/top-bar",
//   "foundation/components/type",
//   "foundation/components/offcanvas",
//   "foundation/components/visibility";

          

         

Motion UIanimationmotion-uifadeInhingeIn

Hi All,

Am trying to create a working example from - Advanced Foundation | Lesson #103
http://zurb.com/university/lessons/create-custom-animations-and-transitions-with-motion-ui

The first step using "fadeIn" and "fadeOut" does not seem to work.

But step two, using 'hingeOut' and 'hingeIn' seems to be fine.

Am I missing something obvious.

Here is an example of the issue:
http://www.naked-dom.cpdev.net/

any help would be very grateful,

cheers

Dominique

// Foundation JavaScript
// Documentation can be found at: http://foundation.zurb.com/docs
$(document).foundation();



var $button = $('#button');
var $panel = $('#panel');

$button.click(function() {
  if ($panel.is(':visible')) {
    MotionUI.animateOut($panel, 'fadeOut');
  }
  else {
    MotionUI.animateIn($panel, 'fadeIn');
  }
});

var $button2 = $('#button2');
var $panel2 = $('#panel2');

$button2.click(function() {
  if ($panel2.is(':visible')) {
    MotionUI.animateOut($panel2, 'hingeOut');
  }
  else {
    MotionUI.animateIn($panel2, 'hingeIn');
  }
});


            

         

And here is the app.scss

  @import "settings";
@import "foundation";

.fish { text-align: left; }

@import "motion-ui";
@include motion-ui-transitions;


.hingeIn {
  @include mui-hinge(in);
}

.hingeOut {
  @include mui-hinge(out);
}

.chips { text-align: left; }


// Or selectively include components
// @import
//   "foundation/components/accordion",
//   "foundation/components/alert-boxes",
//   "foundation/components/block-grid",
//   "foundation/components/breadcrumbs",
//   "foundation/components/button-groups",
//   "foundation/components/buttons",
//   "foundation/components/clearing",
//   "foundation/components/dropdown",
//   "foundation/components/dropdown-buttons",
//   "foundation/components/flex-video",
//   "foundation/components/forms",
//   "foundation/components/grid",
//   "foundation/components/inline-lists",
//   "foundation/components/joyride",
//   "foundation/components/keystrokes",
//   "foundation/components/labels",
//   "foundation/components/magellan",
//   "foundation/components/orbit",
//   "foundation/components/pagination",
//   "foundation/components/panels",
//   "foundation/components/pricing-tables",
//   "foundation/components/progress-bars",
//   "foundation/components/reveal",
//   "foundation/components/side-nav",
//   "foundation/components/split-buttons",
//   "foundation/components/sub-nav",
//   "foundation/components/switches",
//   "foundation/components/tables",
//   "foundation/components/tabs",
//   "foundation/components/thumbs",
//   "foundation/components/tooltips",
//   "foundation/components/top-bar",
//   "foundation/components/type",
//   "foundation/components/offcanvas",
//   "foundation/components/visibility";

          

         
Tim Hartwick almost 4 years ago

Hi Dominique,

It looks like you're using the parameter fadeIn instead of fade-in.

I think if you just change those parameters to spinal-case, it should work.

Let us know if that helped!

Dom almost 4 years ago

Hi Tim,

You were correct, it does work! Thank - you

Why do you think the spinal parameter fade-in works, but the tutorial does specify non-spinal fadeIn.

Also, hinge is also non spinal but does work.

Any pointer would be a great help :)

Cheers again

Dominique