Menu icon Foundation

My Posts

No Content

My Comments

Phillip Nicholl commented on Tom Dean's post over 3 years

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!

Phillip Nicholl commented on Tom Dean's post over 3 years

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.
 

Posts Followed

  • 4
    Replies
  • Help with Motion UI?

    By Tom Dean

    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 wa... (continued)

    Last Reply by Phillip Nicholl over 3 years ago


Following

    No Content

Followers

My Posts

No Content

My Comments

You commented on Tom Dean's post over 3 years

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!

You commented on Tom Dean's post over 3 years

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.
 

Posts Followed


Following

  • No Content

Followers

  • No Content