Menu icon Foundation
Help with Motion UI?

Can someone help me understand motion ui? I am not using sass just the normal download. I do have both the css and motion ui js installed. All I want to do is figure out how to animate an image on load or when in viewport. I think I need something like waypoints for the viewport but can someone just give me an example of an image fading in then?

I am so confused. Do I put data-animate on the image? Or do I put animation-in on the image or do I do it all with js and just target the image? Like:

$(function() {
"use strict";
MotionUI.animateIn('.testimg', 'fade-in');
});

Really I'm just looking for an example of an image simply just fading in. So confused...sorry and thanks in advance for any help.

Motion UI

Can someone help me understand motion ui? I am not using sass just the normal download. I do have both the css and motion ui js installed. All I want to do is figure out how to animate an image on load or when in viewport. I think I need something like waypoints for the viewport but can someone just give me an example of an image fading in then?

I am so confused. Do I put data-animate on the image? Or do I put animation-in on the image or do I do it all with js and just target the image? Like:

$(function() {
"use strict";
MotionUI.animateIn('.testimg', 'fade-in');
});

Really I'm just looking for an example of an image simply just fading in. So confused...sorry and thanks in advance for any help.

Rafi Benkual almost 4 years ago

The default classes are transition based. That means you need something to trigger them like a button click or other event.

An animation can be used this way. The Animation mixins are great because you can create your own custom class to fade things in when the page loads.

Like:

.spin-cw {
  @include mui-animation(fade(in, 2s));
}

Phillip Nicholl over 3 years ago

I'm on my second site with Foundation having moved from 5 to 6. I too am finding it difficult and confusing to know exactly how to implement Motion UI beyond adding a toggle element to trigger a second element to, say, fade in. I'm using SASS with Jeremy Englert's wonderful WordPress starter theme, JointsWP, compiling with Codekit. All works well. Unfortunately, like Tom, I find that most of the Foundation documentation on Motion UI and, dare I say it, forum replies like the one above, seem to lead the non-expert round in circles. There is much in the vein of 'with one bound Jack was free' but very little by way of step-by-step instruction. 

Could I therefore repeat and add my name to Tom's request?

Really I'm just looking for an example of an image simply just fading in.

I'm afraid replies like: 'Animation mixins are great because you can create your own custom class to fade things in when the page loads.' don't help. Firstly, how do we use the basis animation classes and then, how and where, in which files, do we create custom animations?

Forgive me if this sounds anything like a rant. I appreciate the time, effort and goodwill that goes in to answering replies from non-experts like myself. Unfortunately, we are the very people whose loyalty to a platform like Foundation needs to be nurtured if the user base is to expand and, in the case of Motion UI, I feel the documentation is sadly inferior to the product.

Any simple help would be very gratefully received. Thank you very much in advance.

 

Rafi Benkual over 3 years ago

Fair point Phillip.

It seems you are looking for something like Animate.css where you can add animations that start on load.

MotionUI doesn't have CSS classes for animations though it could in the future. You can make your own classes for things like fading in an image or text on load.

I made a simple demo like this:

HTML

<img src="http://placehold.it/300" alt="" class="fader">

SCSS

.fader {
  @include mui-animation(fade(in));
  animation-duration: 5s;
  border: 1px solid #eee;
  padding: 1rem;
}

Let us know how that works for you!

Phillip Nicholl over 3 years ago

Thanks very much, Rafi. I feel an apology on my part is due. I did actually work this out myself yesterday. I spent some time on the Sass site at sass-lang.com making sure I fully understood partials, @import and mixins then went back to the zurb docs on transitions and animations at https://zurb.com/expo/lessons/how-to-create-css-animations-and-transitions and https://zurb.com/expo/lessons/create-custom-animations-and-transitions-with-motion-ui. As you say, the key is to understand the difference between transitions and animations and that to use Motion UI animations you need to create YOUR OWN unique classes to apply to elements. I had been trying to define and add a class 'fade-in' to an element and on inspecting the compiled CSS realised that this was conflicting with the pre-existing Motion UI 'fade-in' class. By creating my own class and adding it to an element I managed to get something (rather silly!) working.

.fade-in-front-page {
	@include mui-animation(fade(0, 1), zoom);
	animation-duration: 20s;
}

In the case of JointsWP I just added this to the _main.scss partial. I had previously thought that with Codekit I might have needed to have Compass installed but the latest version of Codekit handles Foundation 6 very well.

So, I'm happy and, contrary to my assertions, the necessary information is indeed on the Foundation website.

Thank you taking the trouble to make a demo -  they really help people like me to be able to understand the process and in this case it confirms what I learned.

Despite this slightly frustrating episode, I'm really enjoying Foundation 6 and now look forward to adding some (perhaps more subtle) animations!