foundation/motion-ui

💎 The powerful Sass library for creating CSS transitions and animations

motion-ui's Issues

namespaced jQuery environments that do not use $ = jquery

In certain environments such as Drupal, the $ is not used as an alias for jQuery. This makes Motion-UI not work. I suggest this solution to fix the problem RedLucas/MotionUI@b0d57ad

I am getting [foundation.min.js:3 "Uncaught TypeError: Cannot read property 'findFocusable' of undefined"]

I am using the modal reveal in Foundation 6, and any time I open a modal I get this error. Any reason why or fix I should know about? I am completely stumped here...

No way to use attribute selector

Hi,

Trying the scss below I get an error.

Code

.is-desktop &__meta {
            @include mui-slide(out, top, 0);

            &__content,
            [class*="mbbtn"] {
                @include mui-fade(1, 0);
            }
        }

Error

/usr/bin/scss --no-cache --update public.scss:../css/public.css --style compressed
      error vendor/motion-ui/util/_selector.scss (Line 13: Invalid null operation: ""&.mui-" plus null".)

Process finished with exit code 1

Seems the [class*="mbbtn"] is not allowed.

Is there no way to prevent to add mui-enter and mui-leave classes?

dist folder is not updated!

@gakimball Regarding to this commit 2c8d2bb , the folder dist still contains the build of version 1.2.0, but it should contain the build of version 1.2.2

Javascript Delay Options

Maybe I haven't read the documentation thoroughly enough but is there a way to do animations with a delay purely using JS? I've done similar things with WOWjs and was curious if that was something that might happen down the road.

Spin CW vs CCW

The spin keyframe function seems to generate the same keyframe, no matter what direction I choose for the animation.

So these:

@include mui-animation(spin(ccw));
@include mui-animation(spin(cw));

results in this:

.spin-cw {
  animation-name: spin-cw-1turn; }
@keyframes spin-cw-1turn {
  0% {
    transform: rotate(-1turn); }
  100% {
    transform: rotate(0); } }
.spin-ccw {
  animation-name: spin-cw-1turn; }
@keyframes spin-cw-1turn {
  0% {
    transform: rotate(0); }
  100% {
    transform: rotate(1turn); } }

Wouldn't a CCW rotation be like this?

@keyframes spin-ccw-1turn {
  0% {
    transform: rotate(0); }
  100% {
    transform: rotate(-1turn); } }

No animate with css class

Hello, i arrive to make animation with js but if i use class, animations don't work.

This code work

$(function() {
        var $yeti = $('.plop');
        var $transitionList = $('#transitionList');

        $('.butonplap').click(function() {
            MotionUI.animateIn($yeti, $transitionList.val());
        });
    });

If i had class with jquery, animation don't work (compilation with grunt-sass is good)

$button.click(function() {
        $panel.addClass('wiggle');
    });

outpout css in firebug

.wiggle {
    animation-name: wiggle-7deg;
}

I don't understand the problem, so is there somebody who can help me please?.

Thanks for your help

How i can use motion ui animation on things while page scroll ?

I want to animate things while page scrolling is it possible or no ? I want to use this with foundation 6

Add WOW.js integration tutorial

This has been a commonly-requested thing for Motion UI to do, but you can do it with WOW.js by configuring it slightly differently.

Change parameter docs/animations.md

At the bottom of the Animation page for Functions - Zoom, the parameters are listed as:

from (Number) - Size to start at. (Default: 1.5)
from (Number) - Size to end at. (Default: 1)

Should be:

from (Number) - Size to start at. (Default: 1.5)
to (Number) - Size to end at. (Default: 1)

Simplifying transition-basics mixin

As you set up $duration, $timing and $delay to null, there is no need to do the checks in the mixin content of transition-basics.

You can change it to:

  transition-duration: $duration;
  transition-timing-function: $timing;
  transition-delay: $delay;

If the values are null, the properties won't be output.

Series Animation

I'm getting errors when I try to combine effects in the mui-queue mixin.
Copying straight from the playground example.
@include mui-queue(2s, 0s, spin($direction: ccw), slide($direction: up));

Message:
    src/src/util/_keyframe.scss
  91:13  argument `$name` of `call($name, $args...)` must be a string

Backtrace:
    src/src/util/_keyframe.scss:91, in function `call`
    src/src/util/_keyframe.scss:91, in function `-mui-keyframe-combine`
    src/src/util/_args.scss:14, in function `-mui-process-args`
    src/src/util/_series.scss:37, in mixin `mui-queue`
    stdin:281, in mixin `@content`
    src/src/util/_series.scss:24, in mixin `mui-series`
    stdin:279

Using gulp-sass 2.1.0-beta

Error compilation with @include motion-ui-animations;

Hello, i am trying to use motion-ui but when i want add @include motion-ui-animations; i have compilation error.

I use grunt-sass

sass: {

      options: {
        importer: compass,
        sourceMap: true,
        includePaths: ['bower_components/motion-ui/src']
      },

      dist: {
        options: {
          outputStyle: 'expanded'
        },
        files: {
          'css/foundation.css' : 'scss/foundation.scss'
        },
      },
    },

addition Import on foundation.scss (app.scss)

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

// if i don't add motion-ui-animations compilation work
@include motion-ui-animations;

Compilation ERROR

>> File "scss\foundation.scss" changed.
Running "sass:dist" (sass) task
>> Duplicate key "0, 30, 70, 100" in map (name: "wiggle-7deg", 40, 50, 60: (transform: rotate(7deg)), 35, 45, 55, 65: (transform: rotate(0))).
>>   Line 5  Column 15  bower_components\motion-ui\src\effects\_wiggle.scss
Warning:  Use --force to continue.

Aborted due to warnings.

I don't understand the problem, so is there somebody who can help me please?.

Thanks for your help

Correctly casting units

Appending a unit is usually a bad practice. I’d advise fixing this like so:

$output: ($input * 1%);

Same here: https://github.com/zurb/motion-ui/blob/master/src/util/_keyframe.scss#L36.

Relevant read: http://www.sitepoint.com/understanding-sass-units/. :)

Using lists rather than strings when needed

Rather than concatenating strings and commas in order to form a selector, I would advise actually appending to an empty list, then you don't have to deal with separators. Also it's what lists are made for.

What am I doing wrong?

Hello,

I've installed motion-ui via bower and I'm trying to create a simple animation on page load. My code is this:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Test</title>

        <link rel="stylesheet" href="bower_components/motion-ui/dist/motion-ui.min.css" media="screen">
    </head>
    <body>
        <div data-animate="slideInRight" class="slow ease">This is a div.</div>
    </body>
</html>

Nothing happens tho. What am I doing wrong? I've also tried compiling my own CSS, but I still can't get it to work:

<div class="animated">Content</div>

@import "bower_components/motion-ui/src/motion-ui.scss";

@include motion-ui-transitions;
@include motion-ui-animations;

.animated {
    @include mui-animation(slide);
}

Can you help please?

Adding documentation for %animated-element

%animated-element is missing documentation: https://github.com/zurb/motion-ui/blob/master/src/util/_series.scss#L3.

Extend defaults - change to mixin?

Is it possible to change the extend defaults (%mui-defaults) to a mixin? This seems to resolve the issue I was having with this being output at the top of my stylesheet. This was mentioned in an issue I raised for Foundation 7641.

I'll put together a PR and see what you think!

Uncaught Error: Cannot find module 'jquery'

I installed Motion UI via meteor add zurb:motion-ui, but when I start meteor (tried 1.3.2 and 1.3.3) I get the following client error:

Uncaught Error: Cannot find module 'jquery'
require @ install.js:78
(anonymous function) @ motion-ui.js:5
meteorInstall.node_modules.meteor.zurb:motion-ui.dist.motion-ui.js @ motion-ui.js:1
fileEvaluate @ install.js:141
require @ install.js:75
(anonymous function) @ zurb_motion-ui.js?hash=7f54557…:171
(anonymous function) @ zurb_motion-ui.js?hash=7f54557…:177`

jquery seems to work fine though, but Motion UI does not.

Quoting strings

I would advise quoting strings for improved readability as well as avoiding some very edge cases (which might never occur I must concede). Any thought?

Adding documentation for most properties in settings

Most maps from settings are not completely documented: https://github.com/zurb/motion-ui/blob/master/src/_settings.scss.

-webkit -and -ms-prefix for classes

Hi,

I just want to know, if there is a reason why the -webkit and -ms prefixes got deleted?
We got some information from customers with iOS 8 devices where the CSS transitions does not work. That's because Safari 8 only support transitions with the -webkit-prefix.
Same thing for IE9 with -ms-prefix.

Version 1.2

• Add WOW.js section to docs (in progress) 6a046f1
• Test slide() effect—why does .slide-in-up pass in a down parameter? 73902e6
• Automatically add animation-duration to the four built-in animation classes 6a046f1
• Create test HTML page to run transitions/animations a51f1fa

how to use motion-ui scss for beginners?

hi all, i was wondering how can i use motion-ui without javascript.

so far, i've added fade-in class name on my h1 tag but it doesnt seem to fade in..
i've imported and inlcuded motion-ui and motion-ui-transitions and motion-ui-animations on my scss file but still no luck.. am i missing something here? sorry.. i'm just really new to using zurb motion-ui feature

Hide private functions/mixins in documentation

The documentation shouldn't show any private -zf- functions or mixins. This can be done with a Handlebars helper that checks the access property of an item.

About the `turn` unit

I am pretty sure all browsers support the turn unit, contrary to what is stated in the documentation from your turn-to-deg function. Do you have any reliable source about a browser not supporting turn?

SVG won't animate via MotionUI.animateIn($elem, 'spin');

<svg>
  <g class="logo-frame bounceInOut">

var $elem = $('logo-frame');
MotionUI.animateIn($elem, 'spin');

I can't seem to get MotionUI.animateIn($elem, 'spin') to run on my <g class="logo-frame"> tag. It doesn't work on the <path> tag either. If I try <li class='logo-frame'> the animation will run properly.

I've been doing a bit of looking around and it seems that addClass doesn't play nicely with <svg>,so I assume that has something to do with it? I was able to add a class to svg using this module. It's native javascript, but I was able to convert it to jquery as well.

I was able to use the @include mui-series and @include mui-queue mixins in scss and I am able to add is-animation to the container.

Changing camelCase to hyphens

You mostly use hyphens although there seems to be some (unexpected) exceptions such as activateQueueClass. Unless you have a strict naming convention explicitly stating that camelCase should be used in some scenario, I'd advise using hyphens everywhere.

Usage/Docs Clarity for re-using animations in series

I've just been playing around with Motion UI for an upcoming internal training session for our move back to Foundation 6. One thing I'm noticing is that I have a block of code like this:

@include mui-series {
  .card-inner { @include mui-queue(2s, 2s, slide($direction: right)); }
  .card-img { @include mui-queue(1s, 0s, fade); }
  .card-title { @include mui-queue(1s, 2s, slide($direction: right)); }
  .card-text { @include mui-queue(2s, 0s, fade, spin($direction: ccw), slide($direction: up)); }
}

The lines to note are the .card-inner and .card-title which are using the same animation, just staggered slightly apart. When I look at the compiled css, I'm seeing this:

.card-inner {
  -webkit-animation-name: slide-in-right-100;
          animation-name: slide-in-right-100;
  -webkit-animation-duration: 2s;
          animation-duration: 2s;
  -webkit-animation-delay: 0s;
          animation-delay: 0s; }

@-webkit-keyframes slide-in-right-100 {
  0% {
    -webkit-transform: translateX(-100%);
            transform: translateX(-100%); }
  100% {
    -webkit-transform: translateX(0);
            transform: translateX(0); } }

@keyframes slide-in-right-100 {
  0% {
    -webkit-transform: translateX(-100%);
            transform: translateX(-100%); }
  100% {
    -webkit-transform: translateX(0);
            transform: translateX(0); } } 

and then about 20 lines below:

.card-title {
  -webkit-animation-name: slide-in-right-100;
          animation-name: slide-in-right-100;
  -webkit-animation-duration: 1s;
          animation-duration: 1s;
  -webkit-animation-delay: 5s;
          animation-delay: 5s; }

@keyframes slide-in-right-100 {
  0% {
    -webkit-transform: translateX(-100%);
            transform: translateX(-100%); }
  100% {
    -webkit-transform: translateX(0);
            transform: translateX(0); } }

Is there a reason this is being duplicated? The third slide-in-right-100 seems like it shouldn't be there considering it already exists above. I hesitate to call this a bug, because an extra 7 lines in a css file is not a big deal, but it seems like this should be done.

However, the main reason I'm posting this issue is to find out if there is a better way using motion-ui to re-use animations inside of a series-based functionality like this? The docs are good for basic functionality, but get a little bit hazy when you're trying to do more robust animation work. From looking at the source it doesn't look like I can pass an already-created keyframe animation in?

Meteor 1.3 / Scss compiler error

Hi all,

I'm trying to use Motion UI with Meteor but it seems like there's an issue with the mixins.
Any idea? Thanks.

@import '{zurb:motion-ui}/src/motion-ui';
@include motion-ui-transitions;
@include motion-ui-animations;

=> Errors prevented startup:

   While processing files with fourseven:scss (for target web.browser):
   /client/main.scss: Scss compiler error: no mixin named motion-ui-transitions

   Backtrace:
   {}/client/main.scss:5

=> Your application has errors. Waiting for file change.

How can I animate a dropdown menu using motion-ui?

Hello folks. I would like to change my dropdown default behavior on hover (just appear) to something prettier, like a fade-in/fade-out or something like that. Can I use motion-ui for this task? I'm using foundation-sites

animation-duration

I'm not an expert in CSS animations, but could the duration of the animation be missing?

I mean to run a wiggle I have to add animation-duration to the div: https://jsfiddle.net/einfallstoll/hsykk1za/

Or is this behaviour intended (and not? documented)?

motion-ui using GruntJS

Hey ...

i tried to use GruntJS together with motion-ui as i do already for foundation.

so i installed the required stuff:

bower install motion-ui --save
npm install motion-ui --save

included the path in my Gruntfile.js:

.....
        sass: {
            options: {
                includePaths: ['bower_components/foundation/scss','bower_components/motion-ui/src']
            },
.....

then added motion-ui to my app.scss file:

@import "settings";
@import "vars";
@import "foundation";
@import "motion-ui";
@import "style";

When i run grunt now i get the following error:

Running "sass:dist" (sass) task
Verifying property sass.dist exists in config...OK
Files: scss/app.scss -> ../Styles/foundation.css
Options: precision=10, includePaths=["bower_components/foundation/scss","bower_components/motion-ui/src"], outputStyle="expanded", sourceMap=false
>> error reading values after 
>>   Line 13  Column 41  bower_components/motion-ui/src/util/_selector.scss
Warning:  Use --force to continue.

Aborted due to warnings.

What am i doing wrong this time?
;-)

Thanks!

Cheers,
Jochen

Cannot get transitions to work

I have a raw Foundation 6 project (created with the foundation CLI), and I followed the docs here to enable motion-ui. It is installed via bower, and I can see the CSS compiled into the output css file used by my static single page site.

However, I cannot get ANY transitions to work. I have read the relevant pages of the docs a dozen times, and I don't know what I'm missing. But animations DO work. For example, trying to fade something in:

<h2 class="fade-in slow">Some text</h2>

does absolutely nothing.

But this works:

<h2 class="wiggle slow">Some text</h2>

I have also tried using the mix-in method, instead of applying a CSS class directly to the HTML element. Same behavior: animations work, transitions do not. I have tried this on text an images. There are no errors being thrown by my CSS/JS compiler or the browser console (Chrome on a Mac). This is driving me nuts, can someone please help?

Animation is working only for elements with display block property

The animation is now require "display: block" property of the target element.

So I need to put the display:block in my <i></i> or <a></a> elements to be able the animation to work.

Change formatting of Fade animation name

When writing a keyframe name for a Fade animation, the number can't have a dot in it, so you can just drop in a decimal opacity value as-is. The number should be multiplied, or may the dot just stripped out, so the name is legal.

Use ease-out in the demo

Good project idea!

I would recommend to use ease-out easing in the demo at http://zurb.com/playground/motion-ui when enabled easing, instead of ease-in. I think it's a more common scenario and makes it easier to notice.

Getting rid of useless @else

There is no need for an extra @else statement here: https://github.com/zurb/motion-ui/blob/master/src/util/_args.scss#L14-L16. You can return at root. :)

Add scss-lint

Add gulp-scss-lint to do Sass linting.

JavaScript API Changes

Here are some things we want to add or change to the JavaScript API.

animateIn and animateOut would be renamed transitionIn and transitionOut, to make it less confusing that a function called "animate" only works with transitions.

Right now there's no method to add animations, because all you need to do is add a class. But we could write a wrapper that also handles removing the class for you, and giving you a callback that fires when the animation completes (if it has a finite number of loops).

It might look like this:

MotionUI.animate('#element', 'wiggle', function() {
  // Animation done
});

possible bug on $motion-ui-settings custom configuration

hi guys,
I have added this code

$motion-ui-settings: (
slide-and-fade: true,
hinge-and-fade: true,
scale-and-fade: true,
spin-and-fade: true,
activate-queue-class: 'is-animating'
);

on my app-custom.scss file hoping to have a fade in transition included on a slide-in-left transition i was using but it doesn't seem to work.

I've ran gulp to make to it re-builds my file but still no luck.
My temporary work around was this

@include mui-slide(
$fade: true
);

and it works perfect.

Motion-UI of Reveal

I ran into a scope issue with Motion-UI when trying to close a Reveal-Box.

Foundation.Motion.animateIn(this.$element, this.options.animationIn, function () { this.focusableElements = Foundation.Keyboard.findFocusable(this.$element); });

The line with "findFocusable" should have '_this2.$element' instead of "this.$element" as "this" refers to jQuery-Item of the Reveal-Box itself, thus breaking the closing routine with Uncaught TypeError: Cannot read property 'find' of undefined

hth, Peter

Hinge Animation - Erratic - Firefox

Hinge Animation - All variations

http://zurb.com/playground/motion-ui
and motion-ui-starter

I'm Using Firefox 41.0.1
Safari (Version 9.0) and Chrome(45.0.2454.101) - no problem - load and function almost instantaneous

Slow to load - I stopped counting at 5 minutes.
Animation erratic. Sometimes they worked, sometimes they didn't.
At 5 minutes they still were erratic.

Using @at-root

I’d advise using @at-root here: https://github.com/zurb/motion-ui/blob/master/src/util/_animation.scss#L10-L20. :)

Install via composer

Foundation Sites is available via Composer. It would be great if this (not so insignificant) addon would also be installable via composer. I just don't like to install NPM or other stuff in my PHP environment, and I guess others feel the same.

Animating Views/On Load

I am in an Angular app and I am trying this with both Motion UI standalone and the one packaged with Foundation Apps.

My issue is if I want to use Motion UI Javascript, it is executed before DOM elements are loaded so it does not work. I tried to follow the docs and setting this up using UI router.

$stateProvider
        .state('login', {
            url: '/login',
            templateUrl: 'login/login.html',
            controller: 'LoginCtrl',
            authenticate: false,
            animation: {
                enter: 'slideInRight',
                leave: 'fadeOut'
            }
        })
        .state('dashboard', {
            url: '/dashboard',

            views: {
                '': {
                    templateUrl: 'dashboard/dashboard.html',
                    controller: 'DashboardCtrl'
                },
                'current-status-module@dashboard': {
                    templateUrl: 'current-status/current-status.html'
                },
                'alerts-module@dashboard': {
                    templateUrl: 'alerts/alerts.html',
                    controller: 'AlertCardsCtrl'
                },
                'alert-cards-module@dashboard': {
                    templateUrl: 'alerts/alert-cards/alert-cards.html'
                },
                'zones-module@dashboard': {
                    templateUrl: 'zones/zones.html'
                },
                'map-grid-module@dashboard': {
                    templateUrl: 'zones/zone-map/zone-map.html'
                }
            },
            authenticate: true,
            animation: {
                enter: 'fadeIn',
                leave: 'fadeOut'
            }
        })

I also made sure all the modules were included in my App

var dashboardApp = angular.module('dashboardApp', [
'ui.router',
'ngAnimate',
'ui.grid',
'ui.grid.pagination',
'ui.grid.autoResize',
'ui.grid.selection',
'config',
'foundation',
'foundation.dynamicRouting',
'foundation.dynamicRouting.animations'

])

I also made sure the distribution files are linked in the index.html

This is my HTML. I have a few attributes in there because at this point I was just trying things.

<section id="cards" animation-in="fadeIn" data-animate="fadeIn">
        <ul class="main-cards">
            <li ng-repeat="card in cards" class="card" animation-in="fadeIn" data-animate="fade-in">
                <div class="flip-container"
                     ng-click="fetchBackOfCardData(card)"
                     analytics-on="click"
                     analytics-event="Flip Card"
                     analytics-category="Current Status Cards"
                     analytics-label="{{card.title}}"
                     onclick="this.classList.toggle('selected');">
                    <p>Content</p>
                </div>
            </li>
            <div class="clearfix"></div>
        </ul>

There is this code in the app

var cards = document.getElementById('cards');
MotionUI.animateIn(cards, 'fade-in');

So when I run
MotionUI.animateIn(cards, 'fade-in');
in console after page load it works perfectly.

Meteor Package

Are there plans to publish a Meteor package for Motion UI?

MotionUI.animateOut, MotionUI.animateOut do not work properly

Hello,

I get a problem using motion-ui. I have 4 div on which I want to use it but when the mouse goes out before the animation is finished everything messes up. I searched the web and could not find exact answer to this problem as it's said to use the stop() method but it is not implemented. Is there any workaround ?

Thanks for your help.

$(".hover_service").each(function() {

        var $titre = $(this).find('.titre');
        var $content = $(this).find('.content');

        $(this).mouseenter(function() {
            MotionUI.animateOut($titre, 'slide-right-out');
            MotionUI.animateOut($content, 'slide-left-in');
        });

        $(this).mouseleave(function () {
            MotionUI.animateIn($titre, 'slide-right-in');
            MotionUI.animateOut($content, 'slide-right-out');
        });
    });

How to use Animation Classes

Hey,

i'm trying to use Animation Classes. But i can't make it work.
I tried to add classes like "shake" or "wiggle" to animate an element which did nothing.
Even using JS did not work:

// Does not work
MotionUI.animateIn(content, 'wiggle');
// Works
MotionUI.animateIn(content, 'fadeIn');
MotionUI.animateIn(content, 'slow bounceInOut slideInRight');

Don't know if i got it right but i thought i can simply animate any element by adding a class.

How do i use Animation Classes in the right manner?

settings.md being referenced in motion-ui/classes.md doesn't exist.

Over on the classes.md page, the link to the settings.md errors out.

These defaults can be changed by modifying the Motion UI settings;