Gutenslider allows to set event specific animation types

  • STATUS QUO: Selecting a Gutenslider in the Block Editor’s Inspector panel currently offers you to set the animation type:

    • Currently, this is the same animation for all even types.
    • I’d love to set these animation context/event specific.

    I identified 5 unique events in Gutenslider currently:

    USER NEED: ALLOW TO SET ANIMATIONS EVENT SPECIFIC

    Best Practise: Apple Photos app or also iMessages image view in lightbox mode: Sliding events use the slide animation whereas tapping the thumbs jumps to the image with an “Instant” animation allowing better to compare subtle differences between successive photos/screenshots/etc, as the eyes can keep the focus at a certain point.

    Same UI but different interactions allow to achieve different consumption use cases. Both beginners and advanced users are served in one UI.

    UX DESIGN PROPOSAL FOR THE INSPECTOR PANEL:

    1. By default you have one animation type for all events. For better scaling the UI section is redesigned into label, dropdown menu for the animation type, and an action link/button “Add event specific animation”:

    ?? GENERAL

ANIMATION

For all events: [ Slide ? ]

+ Add event specific animation

    2. After clicking “Add event specific animation” a combobox (or dropdown if easier) opens where you select the event type you want to customize. The last non-default animation type “Instant” is already prefilled. Leave it or change as needed. Press [ √ ] to confirm or [ x ] to cancel:

    ?? GENERAL

ANIMATION

        For all other events:  [ Slide ? ]

[ │                        ? ] [ Instant ? ] [ x ] [ √ ]
| ---------------------------|
| Autoplay                   |
| Arrow tap/click            |
| Swipe Gesture              |
| Lightbox Swipe Gesture     |
| Lightbox Thumb click/tap   |
 ----------------------------

    3. After you added a new event specific animation you can press [ x ] to remove it, or press the dropdown/comboboxes to change them. Or “Add event specific animation”.

    ?? GENERAL

ANIMATION

        For all other events:  [ Slide ? ]

[ Lightbox Thumb click/tap ? ] [ Instant ? ] [ x ]

+ Add event specific animation

    4. If all available events got an animation type assigned the action button/link “Add event specific animation” is not available anymore.

    • This topic was modified 1 year, 5 months ago by abitofmind.
Viewing 2 replies - 1 through 2 (of 2 total)
  • Plugin Contributor Gutenberg Slider

    (@gutenbergslider)

    Wow thank you for the good review and suggestions. At the current moment we do not plan to implement this. The underlaying slider library swiperjs.com/ does not support event specific animations. If you want to dig into it, you can always extend the plugin with your own javascript.

    Thread Starter abitofmind

    (@abitofmind)

    UX wise it would make a lot of sense to offer different animation types for different interactions and allow for different user goals all in the same UI, which in itself is usually the benchmark for UX success.

    I have also stated you the best practises of?the mobile apps Apple Photos and iMessages Image lightbox, which use exactly those differentiated interactions/animations exactly for the reasons of satisfying all users and goals in a single UI.

    IMHO you are missing out on a big UX potential for website consumers. Maybe re-consider? Or consider to convince your parters of the slider framework to introduce this, and refer them to this my suggestion with the graphics, design rationale and best practise?

    Courtesy notice: I set the topic as unresolved one more time so that you notice my message.

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Gutenslider allows to set event specific animation types’ is closed to new replies.