hakimel / reveal.js

The HTML Presentation Framework
https://revealjs.com
MIT License
67.37k stars 16.59k forks source link

Feature request: transitions in scroll view mode #3574

Open bouzidanas opened 5 months ago

bouzidanas commented 5 months ago

While it makes sense that transitions are removed for scroll view, there are some similar transition-like behaviors that I think are desirable such as vertical slide (scroll to next/prev slide), as well as concave and convex vertical slide.

For me personally, the one I am currently most interested in is simple vertical slide. When using mouse, the scrolling and snapping is desirable behavior, but when using arrow keys or calling prev and next api functions, the next slide immediately appears. This is fine in some instances, but sometimes its still desirable to scroll to the slide in a smooth fashion (like with ease-in-out).

A basic implementation of the latter behavior can probably be achieve using element.scrollTo function. In fact, the scrollSnap implementation probably contains the code needed to achieve this as well.

tingstad commented 2 months ago

I think I found a possible work around for simple vertical scroll view slides:

Reveal.addKeyBinding({ keyCode: 40, key: 'DOWN', description: 'Next slide' }, () => {
    const viewportElement = Reveal.getViewportElement();
    viewportElement.scrollTo({
        "top": viewportElement.scrollTop + viewportElement.offsetHeight,
        "behavior": "smooth"
    });    
});