Orbit Transitions

[mfitzp]

Foundation 4.0 has removed all transitions from Orbit bar the sliding effect between slides. [n.b. The migration documentation makes no mention of this].

Are there plans to re-implement these other transitions or is Orbit being positioned purely as a swipe-to-switch element?

The sliding is pretty ugly/distracting when Orbit is used for a showcase header on a site - particularly if automatic. If you could confirm one way or the other I'll know whether to hang on or find another plugin. Thanks!

[andreortiz82]

Same comment / question. Thanks.

[emilhem]

Feature mentioned in #1757 (comment)
And similar in: #2000

[bryannielsen]

This seems like a pretty big deal breaker to have a carousel that can't support multiple or custom transition types.

Is there any plan to change this?

[emilhem]

I might take a look at this when I get home from work. No promises for a fix though.

[randomfreeform]

any chance for a few ease in out types like we've had in javascript for years?

[emilhem]

Well, the easing part was easy. Moving it in different directions (up, down, diagonal) or fading is a bit harder...

Easing:
Add this to foundation.orbit.js

easing: 'linear', // default is linear.

to the settings brackets. Example:

settings: {
    timer_speed: 10000,
    animation_speed: 2000, // Default is actually 500 but I like it slow...
    bullets: true,
    stack_on_small: true,
    easing: 'linear', // This is the line we added
    container_class: 'orbit-container',
    stack_on_small_class: 'orbit-stack-on-small',
    next_class: 'orbit-next',
    prev_class: 'orbit-prev',
    timer_container_class: 'orbit-timer',
    timer_paused_class: 'paused',
    timer_progress_class: 'orbit-progress',
    slides_container_class: 'orbit-slides-container',
    bullets_container_class: 'orbit-bullets',
    bullets_active_class: 'active',
    slide_number_class: 'orbit-slide-number',
    caption_class: 'orbit-caption',
    active_slide_class: 'active',
    orbit_transition_class: 'orbit-transitioning'
}

Now edit the line

}, self.settings.animation_speed, 'linear', function() {

to

}, self.settings.animation_speed, self.settings.easing, function() {

Now you can set the easing type in the data-options like this (the animation_speed I added to emphasize that it actually works! Remeber that all easings aren't supported unless you include the jQueryUI library):

<ul data-orbit data-options="easing: 'easeInOutCubic'; animation_speed: 2000;">

You can use most easings if you use jQueryUI found on http://api.jqueryui.com/easings/
Otherwise you only have 'swing' and 'linear'.

[randomfreeform]

THANKS for your efforts emilhem!
So, we only have 'swing' and 'linear' ?
Is swing a soft start and end type ease?
I hope so, I want something smooth and less jarring then what linear is doing now.
(I'll give it a go in a day or 2 when I have time.)

BTW, are you still trying to get fades working too?
Thanks!!

[emilhem]

Check out the examples: http://api.jqueryui.com/easings/
Swing is the second one from the top left. (hint: click on it!)

I think Foundation should include more of the easings.

I will not work on the fading nor moving up/down/diagonal since I don't think that I have the skillset currently to do so. I might give it a try someday if the developers of Foundation doesn't add this wanted feature.

[randomfreeform]

cool... thanks!

[rbvea]

Is there any progress with the other transition types? Having a fading transition would be great!

[emekamicrosoft]

I'm now regretting using foundation 4 on a new project i have deadline to deliver, the framework is not ready, why releasing to the detriment of users, orbit is just a mess because the current horizontal sliding transition is so so ugly, right now twitter bootstrap is better than foundation to me ...

[awshout]

I would also like to the see the fade transition brought back. I can only guess there is much thought going into how they want to implement transitions.

@emekamicrosoft did I miss an update to carousel? I think Bootstrap has room for improvement in areas as well.

[neoighodaro]

I totally hate it when there are clearly issues and no one from the team bothers to give a reason or a workaround at least. Jeez, thought Foundation was built for people in general, not just yourselves.

[talhakamran]

Does anyone know how to have mutiple sliders on a page. And then initialize them through javascript one by one?
My following approach is working:
I am following the simple way of doing it.
When page is ready. I call the init() method to load slider.

            Foundation.libs.orbit.settings.animation_speed = 1000;
            Foundation.libs.orbit.settings.timer_speed = 5000;
            Foundation.libs.orbit.init();
            //now define that when user hovers mouse over the container the animation should pause
            $(".orbit-slides-container").mouseover(function () {
                //orbit-timer class refers to the play/pause button
                $(".orbit-timer").click();
            });
            $(".orbit-slides-container").mouseout(function () {
                $(".orbit-timer").click();
            });

The problem is that I have 2 sliders i.e. Slider-1 and Slider-2. How can I initialize them one by one with different settings. The current apparoach applies this settings on all sliders. I know I can do that in the HTML tag using the data-options="" but I am more interested in how to do it in javascript.

[blindMoe]

Looking for the fade transition as well... looks like there is yet another part of foundation 4 that forces us to revert back to non-foundation goodies

[emekamicrosoft]

Zurb sent me a message as regards to the fade transitions, the fade
transitions on foundation 4 is been worked on. There is gonna be an upgrade
quite very soon. So sit back and relax till they make the upgrade ,...

On Wed, Apr 24, 2013 at 1:56 AM, blindMoe notifications@github.com wrote:

Looking for the fade transition as well... looks like there is yet another
part of foundation 4 that forces us to revert back to non-foundation goodies

—
Reply to this email directly or view it on GitHubhttps://github.com//issues/2023#issuecomment-16902339
.

[data-explorer]

Need fade-in as well... :-) THX in advance. Where do I'm getting informed?

[metos]

I need fade animation too

[jimasun]

I'll be watching this thread as this is essential for my project.

[lonchbox]

fade 👍

[kellygordon]

Waiting for the fade release. Thanks for the info!

[addkolon]

It feels kind of essantial with fade, would really love a fix on this aswell

[da-n]

Hoping for news about fades, other transitions as well, the current animation is not very attractive and seems like a big step backwards from the previous version. As ever, love Foundation and appreciate all the work the Zurb Team put into it, just some user feedback. Thanks!

[samscale]

• 1 for fade

[dimaip]

+1 for fade, ability to hide next/prev arrows, and all other customizations that were in Foundation 3.

[jarimbi]

+1 for fade!

Ability to hide next/prev arrows is already there:
data-options="next_class:hide;prev_class:hide;slide_number_class:hide;"

[MohammadSabbagh]

+1 for fade

[janebeta7]

fade please!

[MohammadSabbagh]

guys try this

http://responsiveslides.com/

and let it go

[PeterBooker]

+1 for fade, it would make life easier.

[ricardoduplos]

+1 for fade!

[purplespider]

+1 for fade! 👍

[mcjwsk]

+1 for fade ;)

[mattpilott]

Need fade desperately

[JU5TY]

+1 for fade!

[AndreiHognogi]

+1 for fade

[alhertz]

+1

[cmpnnt]

The following works for me:

Initialize your slider with:

data-options="animation_speed:0;"

And put this in your CSS:

.orbit-slides-container li.active {
    opacity: 1.0;
}
.orbit-slides-container li {
  -webkit-transition: all 1s ease-in-out;
  -moz-transition: all 1s ease-in-out;
  -ms-transition: all 1s ease-in-out;
  -o-transition: all 1s ease-in-out;
  transition: all 1s ease-in-out;
  opacity: 0.0;
}

Adapted from #1757 (comment)

[purplespider]

Fade has returned!! 4.3 brings animations back, along with fade! http://zurb.com/article/1226/foundation-4-3-paving-the-road-to-5

[dreadrocksean]

Where's fade?

[purplespider]

@dreadrocksean Make sure you're on version 4.3, and read the docs: http://foundation.zurb.com/docs/components/orbit.html

[dreadrocksean]

Please forgive but for nothing can I find documentation on fade transitions. Where do I look? I tried the link you sent.

[purplespider]

Search for "fade" on that page and you'll find the config setting to enable the fade transition.

[dreadrocksean]

omg, how did I not see that. Thank you and I apologize.

[dreadrocksean]

One more thing: Does the user have control over the transition speed of the fade? Changing the value of "animation_speed" does not seem to alter anything. Is "orbit-transitioning" relevant here?

[erralb]

same problem here, I can't seem to find how to change the fading animation speed

[janharold]

Yes, animation_speed doesn't work properly.

[Cam]

Yes, animation_speed definitely doesn't work properly. Does anyone know what animations are/will be supported?