transitionType 'move' - Is it possible to get block moving from right, top, bottom, rather than the default left?

mark.adams's Avatar

mark.adams

10 Feb, 2020 10:16 AM

I can see how to do this on elements within blocks with data-move-effect="right", but I cannot see a way to get the entire block scolling in from the top, bottom or right?. Thanks

  1. Support Staff 1 Posted by Dmitry Semenov on 10 Feb, 2020 08:32 PM

    Dmitry Semenov's Avatar

    Not sure if I fully understand what you mean, if you're referring to the animation of the slides itself - they can only "move" (horizontally or vertically) or "fade" (which can be controlled via transitionType option).

  2. 2 Posted by mark.adams on 10 Feb, 2020 08:43 PM

    mark.adams's Avatar

    Hi. I'll try to explain. Let's say I have two pictures in my playlist:

      <div class="rsContent slide1" data-rsDelay="2000">
        <div class="bContainer">
          <strong class="rsABlock txtCent blockHeadline">This is an animated block</strong>
          <span class="rsABlock txtCent" data-move-effect="none" x>you can place it on any type of slide</span>
        </div>
      </div>

    <div data-rsDelay="4000">
    <img src="C:\Users\marka\AppData\Local\R4Cache\L\c\Users\Public\R4\Pictures\P001-Animals0023-800x600-J001RW1920H1080.jpg" />
    </div>
      <div data-rsDelay="3000">
    <img src="C:\Users\marka\AppData\Local\R4Cache\L\c\Users\Public\R4\Pictures\P001-Animals0025-800x600-J001RW1920H1080.jpg" />
    </div>

    If I alter the index.html page to use the move transition:

    <script id="addJS">jQuery(document).ready(function($) {
    jQuery.rsCSS3Easing.easeOutBack = 'cubic-bezier(0.175, 0.885, 0.320, 1.275)';
    $('#slider-with-blocks-1').royalSlider({
    arrowsNav: false ,
    autoPlay: {
    // autoplay options go gere
    enabled: true,
    pauseOnHover: false,
    delay: 1000
    },
    block: {
    delay: 500
    },

    arrowsNavAutoHide: false,
    fadeinLoadedSlide: false,
    navigateByClick: false,
    controlNavigationSpacing: 0,
    controlNavigation: 'none',
    imageScaleMode: 'none',
    imageAlignCenter:false,
    blockLoop: true,
    loop: true,
    numImagesToPreload: 6,
    transitionType: 'move',
    slidesSpacing: 0,
    keyboardNavEnabled: false
    });
    });
    </script>

    Then the first picture scrolls in horizontally from the right side of the screen to the left side. Is it possible to get it to scroll horizontally, left side of the screen to the right, or vertically instead?

    Thanks

    Mark.

  3. Support Staff 3 Posted by Dmitry Semenov on 11 Feb, 2020 05:27 AM

    Dmitry Semenov's Avatar

    No, it's not possible, slide content (image, and other html) will always animate with the main scroller.

    You can partly implement it via CSS transitions http://help.dimsemenov.com/kb/royalslider-javascript-api/adding-cus...

  4. 4 Posted by mark.adams on 11 Feb, 2020 07:37 AM

    mark.adams's Avatar

    OK. No problem. If you can add that to your suggestions list please. I ideally I would like:transitionTypes:

    transitionType: 'fade',
    transitionType: 'move',

    transitionType: 'move-from-left',
    transitionType: 'move-from-top',
    transitionType: 'move-from-bottom',

    and any other full slide transitions that would be easy.

    Many thanks

    Mark.

Reply to this discussion

Internal reply

Formatting help / Preview (switch to plain text) No formatting (switch to Markdown)

Attaching KB article:

»

Attached Files

You can attach files up to 10MB

If you don't have an account yet, we need to confirm you're human and not a machine trying to post spam.

Keyboard shortcuts

Generic

? Show this help
ESC Blurs the current field

Comment Form

r Focus the comment reply box
^ + ↩ Submit the comment

You can use Command ⌘ instead of Control ^ on Mac