Foundation-sites: [Reveal] Cannot change the animation speed of Reveal open/close

[chuntley]

We are having a hard time figuring out how to change the animation speed of the Reveal open/close events. Added a "fast" class to the element does not change the speed, and we cannot find documentation on it as well.

I looked through the source and noticed that in the foundation.util.motion.js file, line 57, the duration options are commented out:

var Motion = {
  animateIn: function(element, animation, /*duration,*/ cb) {
    animate(true, element, animation, cb);
  },

  animateOut: function(element, animation, /*duration,*/ cb) {
    animate(false, element, animation, cb);
  }
};

Is this a planned feature for the future?

[gakimball]

The .fast class should work. We don't plan on adding duration to the Motion UI functions, as that stuff is easier handled in CSS. We'll look into it.

[gakimball]

The speed classes (.slow and .fast) work, which means you can also apply transition-duration to a specific modal and change the speed.

_However_, the modal overlay doesn't get the speed change—it transitions at the standard speed. Since there's just one overlay that every modal uses, in theory you'd need the overlay to read the transition speed off the incoming modal, so the speed could be mimicked. @zurbchris thoughts?

[zurbchris]

Seems pretty simple. I could run a check in the overlay creation fn to also add speed classes, if present. Wouldn't have any effect if not included.

[gakimball]

@zurbchris I'd prefer not to hardcode a check for "fast" and "slow", because it's always possible the transition-duration comes from another class.

[zurbchris]

Sense you are making, easier you are not...

[gakimball]

@zurbchris ;) <3

[ruudvanham]

Currently i've the same problem.

I've added the class .fast and changed the duration in css. This works for the modal but not for the overlay. Also it seems the modal is waiting for the overlay animation, it starts mid way it seems.
Possible solution?

[mattems]

:100: @ruudvanham definitely need to be able to start the reveal overlay and the modal at the same time.

[gakimball]

Changed the open/close methods so the overlay and the modal start their animations at the same time: 1c9a12dc9711b85f566d603defe190e62cf416c1

As for syncing up the animation speeds, still working that out.

[arielnoname]

I think this is the right place to put this:

I managed to change the duration of the animation of the modal window using the helper classes (fast, slow) and even further in motion-ui/src/_settings.scss , but still I would like the reveal-overlay to be faster, goes to black a little slow for my taste.

Maybe it could be some data-reveal-overlay-speed attr?

I checked /foundation-sites/js/foundation.reveal.js and foundation-sites/scss/components/_reveal.scss with no luck

Thanks for the code

[Larzans]

+1 I absolutely agree that there should be an option for that.
As a workaround one can use the following code to change for example the fade-in speed:

    .reveal-overlay.fade-in {
      transition-duration: 0.25s;
    }

[arielnoname]

Whoa! Thanks @Larzans ! That worked like a charm

[Larzans]

your very welcome :)

[HanlonCreative]

Also for me when I use the 'fast' class, on mobile the reveal modal is off to the side, basically it breaks the responsiveness of the site as you have to swipe right to see the rest of the modal. I don't think it is my html structure doing this either.

<div class="reveal fast" id="animatedModal10" data-reveal data-options="closeOnEsc:false;closeOnClick:false;" data-animation-in="slide-in-up" data-animation-out="slide-out-down">

And to clarify I am trying to increase the speed of the modal window itself AND the overlay fade in. If I could only choose one, I would want the Modal Window to speed up

[andycochran]

@kball You wanna take a stab at implementing @Larzans' workaround?

[kball]

@andycochran the workaround isn't configurable, and I don't see a straightforward way to implement the general case alluded to by @gakimball but I can make sure 'slow' and 'fast' get applied to the overlay as well as the modal, and that should address most cases