More info on Motion UI

[adibbz]

Has anyone had success using Foundation Motion UI? I see it's included in foundation.scss but if I add a class or a mixin nothing happens?

Anyone have some direction?

[colin-marshall]

Even though you're using FoundationPress, you'll get better results by putting this question on the official Foundation Forums

[EricRihlmann]

It appears you are trying to use Motion UI without JavaScript. You'll need to use JS to trigger the animation/transitions. Here is a basic example to animate in the main content of FoundationPress.

Add this to the end of assets/javascript/custom/init-foundation.js

MotionUI.animateIn('.main-content', 'slide-in-right');

To compile your changes run

$ npm run build

Now look at a post or page, the main content should slide in from the right.

Check out the introduction page to learn more about what is possible and how to create your own animation/transitions with the Sass mixins.
http://zurb.com/playground/motion-ui

[adibbz]

Thanks @EricRihlmann! Using JS worked for me. It's a bummer you can't just add a CSS class.

[dberz]

@colin-marshall @EricRihlmann @adibbz @olefredrik - sorry to add to a closed ticket, but can you clarify that it is indeed necessary to update init-foundatgion.js for each motion UI animation that I might want to add to my site?

From the standard Foundation documentation, it looks like I should only need to add data-toggler data-animate="animation_name" to animate elements.

Is there an easier way than as suggested by Eric above?

I'm looking to add subtle animations to divs, text areas, images, etc across my website.

Thank you.

[colin-marshall]

@dberz I don't have time to fiddle with it now, but what I remember regarding MotionUI is that the JavaScript is optional and the main way to use MotionUI is through data attributes like you posted. The JavaScript is just there so that you can dynamically trigger animations, if i remember correctly.