Foundation
-
FollowReplies
-
Motion UI - basic install issue
byDom Friday, November 13, 2015 at 8:24 AM EST
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";
Dom
about 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
Hi Dominique,
It looks like you're using the parameter
fadeIninstead offade-in.I think if you just change those parameters to spinal-case, it should work.
Let us know if that helped!