Smoothing transition of centered content

[chorn99]

I'm not completely knowledgable in JavaScript so I need help smoothing out a transition.

My basic problem is that I am not changing the size of the content (image) but just having the slides decrease in width. I was able to get the image to be centered both in the current and non-current slides using CSS, but because the css rule of "current" does not apply to the slide until after the transition, the image looks like it is jumping to the center of the enlarged slide.

Is there a way to use JavaScript to animate this?

I've created a demo here: http://jsfiddle.net/GRvum/1/

[Mottie]

You could add some css3 transitions to smooth it out - demo

CSS

#slider { width: 600px; }
#slider li { width: 300px; }

.mb-inside * {
    max-width: none;
}

/*** Inside the panel ***/
.mb-inside {
    overflow: hidden;
    padding: 0;
}

.mb-inside > div.image {
    display: block;
    width: 300px;
    height: 221px;
    margin-left: -75px;
    position:relative;
}

.mb-panel .reveal img {
    margin-left: 0;
    width: 300px;
    margin-left: 0;
    -webkit-animation: reveal .7s ease;
    -moz-animation: reveal .7s ease;
    -ms-animation: reveal .7s ease;
    -o-animation: reveal .7s ease;
    animation: reveal .7s ease;
}

@-webkit-keyframes reveal {
    0%   { margin-left: -75px; }
    100% { margin-left: 0; }
}
@-moz-keyframes reveal {
    0%   { margin-left: -75px; }
    100% { margin-left: 0; }
}
@-ms-keyframes reveal {
    0%   { margin-left: -75px; }
    100% { margin-left: 0; }
}
@keyframes reveal {
    0%   { margin-left: -75px; }
    100% { margin-left: 0; }
}

Script

$('#slider').movingBoxes({
    startPanel   : 1,      
    wrap         : false,   
    fixedHeight  : true,
    reducedSize  : .5,
    speed        : 200,
    buildNav     : true,   
    navFormatter : function(){ return "●"; },

    // **** Callbacks ****
    // e = event, slider = MovingBoxes Object, tar = current panel #
    // callback when MovingBoxes has completed initialization
    initialized: function(e, slider, tar){
        // set starting panel
        slider.$panels.eq(tar-1).find('.mb-inside').addClass('reveal');
    },
    // callback before any animation occurs
    beforeAnimation: function(e, slider, tar){
        slider.$el.find('.reveal').removeClass('reveal');
        slider.$panels.eq(tar-1).find('.mb-inside').addClass('reveal');
    }                     

});​

[chorn99]

Ok, I see what you are doing there. It does help to smooth it out a little bit so that it is less jarring.

However, looking closer at what is actually happening, it looks like the MB animation is enlarging the width of the slide from left to right. I guess I'm more asking if there is a way for it to enlarge from the center, like sliding doors?

[Mottie]

Did you see this demo? It's from the home page of the wiki documentation.

[chorn99]

Yeah I did see that, it wasn't quite what I was looking for.

So I think I have it mostly figured out.

I went back to your demo using CSS3 animations, and noticed that you put the animation on the img itself. So I changed it to be on the container [ div.image ] which is actually what I want positioned. I also changed it to be a transition to simplify. And added the same transition to the non-'.reveal' state so that it would reverse.

I just made sure that the CSS3 transition time and the MB speed were the same – but I gave the MB speed a bit more because it was still a bit jerky.

Here is the demo: http://jsfiddle.net/GRvum/8/

I think it's a pretty good solution for now. There seems to be a bit of a hiccup somewhere during the animation though. It also only works when all the images are the same width.

[Mottie]

Nice! It gives the panels a kind of wave-like feeling.

Moving Boxes wasn't really set up to have different width panels, so that's the purpose of the max-width settings. There is an open ticket (#43) requesting variable width panels with a fixed height, but I haven't really had the time to work on this enhancement. So for now, it won't support different panel widths.

[Mottie]

I'm guessing that the problems mentioned here have been resolved, so I'm closing this issue. Please feel free to reopen it if you continue to have problems. And monitor the other issue for updates on variable width panels. Thanks!