Menu icon Foundation
Motion UI Multiple mui-series

Hi Motion UI Experts,

I am trying to use the mui framework and I want to achieve the following: Clicking on a button should start an animation series. Works like a charme. Now that I have my animated content in the foreground, I have a close button, that basically should kick off an another mui series, to remove all my elements in the foreground. It's almost like reversing all my animations again to go back to the first screen. How can I achieve this? How can I add another mui-series?

This my first working mui-series:

@include mui-series {
    .splitscreen__list--item-1 {
        @include mui-queue(0.3s, -0.2s, fade($from: 1, $to: 0));
    }
    .splitscreen__list--item-2 {
        @include mui-queue(0.3s, -0.2s, fade($from: 1, $to: 0));
    }
    .splitscreen__list--item-3 {
        @include mui-queue(0.3s, -0.2s, fade($from: 1, $to: 0));
    }
    .splitscreen__item--primary__headline {
        @include mui-queue(0.3s, -0.2s, fade($from: 1, $to: 0));
    }
    .splitscreen__item--primary__subheadline {
        @include mui-queue(0.3s, -0.2s, fade($from: 1, $to: 0));
    }
    .animate_button-primary {
        @include mui-queue(0.3s, 0s, fade($from: 1, $to: 0));
    }
    .fullscreen__headline {
        @include mui-queue(0.3s, -0.2s, fade($from: 0, $to: 1));
    }
    .fullscreen__grid__item__1 {
        @include mui-queue(0.3s, -0.2s, fade($from: 0, $to: 1));
    }
    .fullscreen__grid__item__2 {
        @include mui-queue(0.3s, -0.2s, fade($from: 0, $to: 1));
    }
    .fullscreen__grid__item__3 {
        @include mui-queue(0.3s, -0.2s, fade($from: 0, $to: 1));
    }
    .fullscreen__grid__item__4 {
        @include mui-queue(0.3s, -0.2s, fade($from: 0, $to: 1));
    }
    .fullscreen__grid__item__5 {
        @include mui-queue(0.3s, -0.2s, fade($from: 0, $to: 1));
    }
    .fullscreen__grid__item__6 {
        @include mui-queue(0.3s, -0.2s, fade($from: 0, $to: 1));
    }
    .fullscreen__close {
        @include mui-queue(0.3s, -0.2s, fade($from: 0, $to: 1));
    }
}

This is how I trigger it:

$buttonprimary.click(function() {

    $html.css("overflow", "hidden");
    $body.css("overflow", "hidden");

    $('.splitscreen').addClass('is-animating');

    setTimeout(function() {
        $splitscreen.toggleClass("primary__fullsize");
        $main.css("display", "none");
        $aside.css("display", "initial");
    }, 800);


    setTimeout(function() {
        $splitscreen.removeClass('is-animating');
    }, 3000);

});

$buttonclose.click(function() {

    $('.splitscreen').addClass('is-animating');
    
    ... 


});

Thanks for any help with this!

motionuimotion-uimui-seriesmui-queueFoundationanimationmultiple animations

Hi Motion UI Experts,

I am trying to use the mui framework and I want to achieve the following: Clicking on a button should start an animation series. Works like a charme. Now that I have my animated content in the foreground, I have a close button, that basically should kick off an another mui series, to remove all my elements in the foreground. It's almost like reversing all my animations again to go back to the first screen. How can I achieve this? How can I add another mui-series?

This my first working mui-series:

@include mui-series {
    .splitscreen__list--item-1 {
        @include mui-queue(0.3s, -0.2s, fade($from: 1, $to: 0));
    }
    .splitscreen__list--item-2 {
        @include mui-queue(0.3s, -0.2s, fade($from: 1, $to: 0));
    }
    .splitscreen__list--item-3 {
        @include mui-queue(0.3s, -0.2s, fade($from: 1, $to: 0));
    }
    .splitscreen__item--primary__headline {
        @include mui-queue(0.3s, -0.2s, fade($from: 1, $to: 0));
    }
    .splitscreen__item--primary__subheadline {
        @include mui-queue(0.3s, -0.2s, fade($from: 1, $to: 0));
    }
    .animate_button-primary {
        @include mui-queue(0.3s, 0s, fade($from: 1, $to: 0));
    }
    .fullscreen__headline {
        @include mui-queue(0.3s, -0.2s, fade($from: 0, $to: 1));
    }
    .fullscreen__grid__item__1 {
        @include mui-queue(0.3s, -0.2s, fade($from: 0, $to: 1));
    }
    .fullscreen__grid__item__2 {
        @include mui-queue(0.3s, -0.2s, fade($from: 0, $to: 1));
    }
    .fullscreen__grid__item__3 {
        @include mui-queue(0.3s, -0.2s, fade($from: 0, $to: 1));
    }
    .fullscreen__grid__item__4 {
        @include mui-queue(0.3s, -0.2s, fade($from: 0, $to: 1));
    }
    .fullscreen__grid__item__5 {
        @include mui-queue(0.3s, -0.2s, fade($from: 0, $to: 1));
    }
    .fullscreen__grid__item__6 {
        @include mui-queue(0.3s, -0.2s, fade($from: 0, $to: 1));
    }
    .fullscreen__close {
        @include mui-queue(0.3s, -0.2s, fade($from: 0, $to: 1));
    }
}

This is how I trigger it:

$buttonprimary.click(function() {

    $html.css("overflow", "hidden");
    $body.css("overflow", "hidden");

    $('.splitscreen').addClass('is-animating');

    setTimeout(function() {
        $splitscreen.toggleClass("primary__fullsize");
        $main.css("display", "none");
        $aside.css("display", "initial");
    }, 800);


    setTimeout(function() {
        $splitscreen.removeClass('is-animating');
    }, 3000);

});

$buttonclose.click(function() {

    $('.splitscreen').addClass('is-animating');
    
    ... 


});

Thanks for any help with this!

Rafi Benkual about 4 years ago

I think you basically need to .addClass on the close button and create a new animation series in reverse.

phil about 4 years ago

I am not sure if I understood this properly. If I create another animation series (in reverse), how can I distinguish between the first and the second series? Because there is just one trigger class, it will fire both series, right? Am I making sense??

saxafrass almost 4 years ago

I too am also curious about this. Phil did you ever find a solution?

phil almost 4 years ago

Hey @Rafi Benkual or any other MUI-expert. Can I achieve this or is this just not possible with Foundation? Thanks for your help!

saxafrass almost 4 years ago

I too am also wondering if this is possible.

There also does not seem to be an easy way to accomplish simple css transitions anymore? The compass transition mixins were incredibly easy to implement and I don't see an easy way to achieve the same things using MUI anymore? Simple things like animating a hover effect for example... Any insight or direction would be much appreciated.

Rafi Benkual almost 4 years ago

@phil You would likely have a different class for closing the animation and different animations to reverse it.

@saxafrass What type of transition are you seeking? You can use any of these classes out of the box https://github.com/zurb/motion-ui/blob/master/docs/classes.md

saxafrass almost 4 years ago

@Rafi : regarding your answer to Phil - it seems like there is only a single class for creating a MUI series. Are you saying we can do something like create two mui-series classes or that the single mui-series will have to contain classes for both closing and opening animations? The second way implies there is no way to run a specific series without running all of the series at once?

@include .opening-mui-series {
    .splitscreen__list--item-1 {
        @include mui-queue(0.3s, -0.2s, fade($from: 1, $to: 0));
    }
    .splitscreen__list--item-2 {
        @include mui-queue(0.3s, -0.2s, fade($from: 1, $to: 0));
    }
    .splitscreen__list--item-3 {
        @include mui-queue(0.3s, -0.2s, fade($from: 1, $to: 0));
    }
}

@include closing-mui-series {
    .splitscreen__list--item-1 {
        @include mui-queue(0.3s, -0.2s, fade($from: 0, $to: 1));
    }
    .splitscreen__list--item-2 {
        @include mui-queue(0.3s, -0.2s, fade($from: 0, $to: 1));
    }
    .splitscreen__list--item-3 {
        @include mui-queue(0.3s, -0.2s, fade($from: 0, $to: 1));
    }
}

VS.

@include .mui-series {
    .splitscreen-closing__list--item-1 {
        @include mui-queue(0.3s, -0.2s, fade($from: 1, $to: 0));
    }
    .splitscreen-closing__list--item-2 {
        @include mui-queue(0.3s, -0.2s, fade($from: 1, $to: 0));
    }
    .splitscreen-closing__list--item-3 {
        @include mui-queue(0.3s, -0.2s, fade($from: 1, $to: 0));
    }

    .splitscreen-opening__list--item-1 {
        @include mui-queue(0.3s, -0.2s, fade($from: 0, $to: 1));
    }
    .splitscreen-opening__list--item-2 {
        @include mui-queue(0.3s, -0.2s, fade($from: 0, $to: 1));
    }
    .splitscreen-opening__list--item-3 {
        @include mui-queue(0.3s, -0.2s, fade($from: 0, $to: 1));
    }
}

in regards to my comment - this is probably not the appropriate thread, but animating something simple like a color change or minor position change does not seem to be the purpose of MUI? For instance hover effects on a navigation menu. Say I want a menu item to "shift" left 10px and fade from black to grey when someone hovers over it and then return to it's original position/color after the hover. In the past I could just @include singleTransition(all) via compass and change css properties under a:hover to create an animated effect. Now with MUI i have to write a bunch of jquery to achieve what used to be a simple css transition.

Rafi Benkual almost 4 years ago

@saxafrass

Say I want a menu item to "shift" left 10px and fade from black to grey when someone hovers over it 

So this ^ can be done with regular CSS just as easily.

MotionUI will help with more complex keyframes
- fade($from, $to)
- hinge($state, $from, $axis, $perspective, $turn-origin)
- shake($intensity)
- slide($state, $direction, $amount)
- spin($state, $direction, $amount)
- wiggle($intensity)
- zoom($from, $to)

saxafrass almost 4 years ago

So came back to this after a couple of days. Figured out that you can have multiple mui-series. Basically you just do an @include mui-series {} twice and specify different elements in each. In the example below I use jQuery to change a parent class from .animate-in to .animate-out and then add the .is-animating class.

//intro animation
@include .mui-series {
.animate-in .col-1 {
@include mui-queue(.5s, -.25s, hinge(in, right, center, 2000, from-front));
}
.animate-in .col-2 {
@include mui-queue(.5s, -.25s, hinge(in, right, center, 2000, from-front));
}
.animate-in .col-3 {
@include mui-queue(.5s, -.25s, hinge(in, right, center, 2000, from-front));
}
}

//animate out
@include .mui-series {
.animate-out .col-3 {
@include mui-queue(.5s, -.25s, hinge(out, right, center, 2000, from-front));
}
.animate-out .col-2 {
@include mui-queue(.5s, -.25s, hinge(out, right, center, 2000, from-front));
}
.animate-out .col-1 {
@include mui-queue(.5s, -.25s, hinge(out, right, center, 2000, from-front));
}
}

Not sure if this is the best way to do it, but it seems to work.

phil almost 4 years ago

@saxafrass did you manage to get it going with two classes? I have no idea how that would work and there does not seem to be anything in the docs.

saxafrass almost 4 years ago

@phil No. The closest I got was creating two @mui-series. Then add/remove a class to the necessary elements before adding the .is-animating class Basically when you add the .is-animating class both mui-series will run, but only one of the series' elements will have the appropriate classes. Below is some code I've been playing with to animate in/out slides on a website. It's not a very elegant solution, but hope that helps.

<div class="wrapper"> <!-- add .is-animating class here -->
  <div class="slide-1 opening"> <!-- switch between .opening/.closing class to switch between .mui-series -->
    <div class="item-1"></div>
    <div class="item-2"></div>
    <div class="item-3"></div>
  </div>
  <div class="slide-2"> <!-- switch between .opening/.closing class to switch between .mui-series -->
    <div class="item-1"></div>
    <div class="item-2"></div>
    <div class="item-3"></div>
  </div>
</div>

@include mui-series {
    .opening .item-1 {
        @include mui-queue(0.3s, -0.2s, fade($from: 0, $to: 1));
    }
    .opening .item-2 {
        @include mui-queue(0.3s, -0.2s, fade($from: 0, $to: 1));
    }
    .opening .item-3 {
        @include mui-queue(0.3s, -0.2s, fade($from: 0, $to: 1));
    }
}

@include closing-mui-series {
    .closing .item-1 {
        @include mui-queue(0.3s, -0.2s, fade($from: 1, $to: 0));
    }
    .closing .item-2 {
        @include mui-queue(0.3s, -0.2s, fade($from: 1, $to: 0));
    }
    .closing .item-3 {
        @include mui-queue(0.3s, -0.2s, fade($from: 1, $to: 0));
    }
}
$('#my-button').click(function() {
        $('.opening').removeClass('opening').addClass('closing');
        $('.slide-2').addClass('opening');
        $('#wrapper').addClass('is-animating');
});

Geoff Kimball almost 4 years ago

@saxafrass The two series will use the same activator class (maybe we'll make that configurable at some point?), but as long as the HTML for the two series is isolated, one won't affect the other.

phil almost 4 years ago

Hey @Geoff Kimball what do you mean by isolated? Could you give an example on how to build my html so i can use multiple animations?

Geoff Kimball almost 4 years ago

@phil Isolated as in, the HTML for each series is separate.

<div class="series-one">
  <div class="series-one-1"></div>
  <div class="series-one-2"></div>
  <div class="series-one-3"></div>
</div>

<div class="series-two">
  <div class="series-two-1"></div>
  <div class="series-two-2"></div>
  <div class="series-two-3"></div>
</div>

So the .is-animating class goes on the wrapper element for each.

Fadi Amro almost 4 years ago

After beta testing Landing Page InstaBuilder v2 and really learning the full power of LPM – I have to say this is one of the most powerful list conversion software I have ever seen ,Here's how you can stop wasting your valuable time and money...

Easy-To-Use  Drag and Drop  Software Creates All Your Landing Pages In Mere Minutes... Without Expensive Fees!

http://goo.gl/RmI9PT