New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Modified the way slides are hidden, allowing for animated transitions. #69

Merged
merged 4 commits into from Nov 17, 2013

Conversation

Projects
None yet
4 participants
@freakboy3742
Copy link
Contributor

freakboy3742 commented Nov 15, 2013

This change adds a 'remark-fading' class to a slide when it stops being visible. This class keeps the old slide visible for 1000ms, on a lowered z-index, so that new slides can use an animated transition when they appear. By keeping the old content on the screen, it will look like the new slide is sliding in/out over the old content.

Adding animations is also fairly easy; If you add animate.css to your stylesheet for your presentation, and add a class definition to your slide markdown:

class: animated slideInRight

transitions to that slide will be animated.

If you don't use animated transitions, this change has no effect - the faded slide will be visually "behind" the current slide, making it invisible.

Modified the way slides are hidden, allowing for animated transitions.
This change adds a 'remark-fading' class to a slide when it stops being
visible. This class keeps the old slide visible for 1000ms, on a lowered
z-index, so that new slides can use an animated transition when they appear.
By keeping the old content on the screen, it will look like the new slide is
sliding in/out over the old content.

Adding animations is also fairly easy; If you add
(animate.css)[https://github.com/daneden/animate.css] to your
stylesheet for your presentation, and add a class definition to your
slide markdown:

    class: animated slideInRight

transitions to that slide will be animated.

If you don't use animated transitions, this change has no effect - the
faded slide will be visually "behind" the current slide, making it invisible.
@gnab

This comment has been minimized.

Copy link
Owner

gnab commented Nov 15, 2013

This is a very nice feature. However, it may need a few, small adjustments before it's ready to go in.

I created this jsFiddle for testing your pull-request: http://jsfiddle.net/RDmqy/1/

  1. The new transparent slide background color seems a bit weird as a default value. People could just set it back to white if white is what they want, but I don't see any reason why this couldn't stay the way it was?
  2. During the 1s when both the old fading-out and the new current slide is visible, both slides' drop shadows are visible, overlapping, effectively creating what looks like a less transparent drop shadow. This is of course no problem when the slide fits perfectly in your browser and the shadows aren't visible, but as long as they are visible, it would be nice if the old fading-out slide's shadow was hidden, so you couldn't tell there was two overlapping shadows in play.
  3. I saw you changed from position: relative to position: absolute. This affects the rendering when printing, causing only the current slide to be printed. Opening the below two links and pressing Ctrl+P demonstrates the issue:
@freakboy3742

This comment has been minimized.

Copy link
Contributor

freakboy3742 commented Nov 15, 2013

Thanks for the feedback.

  1. The reason for the CSS transparent is to make the slides appear to stack over the top of each other. The stack of elements in a deck isslides-area, slide-container, slide-scaler, slide, and slide-content. The slide-content is what gets animated, so this is the div that "moves"; while it is moving, you see the slide underneath it. If the slide div is transparent, that means you get to see the previous slide; if slide div has a background colour, you see a full panel of that colour, which looks odd during the animation.

    I take it that your objection is that the unintended side effect of this change is that the default slide background colour is "transparent", which means that the "default" slide deck looks odd. My suggested fix here would be to set the background colour on slide-content to be #fff, and keep the background on slide as transparent. I'll update the pull request shortly to make this change.

  2. Good point - I hadn't noticed this. I'll fix this in the update.

  3. I'm not entirely sure why, but the position:absolute seems to be require to make the animations work. I'll take a closer look, at this.

@freakboy3742

This comment has been minimized.

Copy link
Contributor

freakboy3742 commented Nov 16, 2013

So as of 8b1e168, the print stylesheet should be correct as well (along with a couple of other print-related cleanups that I noticed). I wasn't able to revert the position:absolute, but it's easy to override on the print stylesheet so that printing works as expected.

gnab added a commit that referenced this pull request Nov 17, 2013

Merge pull request #69 from freakboy3742/animation
Modified the way slides are hidden, allowing for animated transitions.

@gnab gnab merged commit 1a9ed2d into gnab:master Nov 17, 2013

@kernc

This comment has been minimized.

Copy link

kernc commented Apr 16, 2015

So given this wonderful animated feature, how does one apply a default set of classes to all slides with a single line?

@utdrmac

This comment has been minimized.

Copy link

utdrmac commented Jan 31, 2017

@kernc Figured it out, in a way. If you are using a layout to apply something to all pages, like a footer and header, you can add class: animated, slideInRight to the layout and it will apply to all. This makes all slides animate the same way, if that's what you want.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment