[v1] slide-left/slide-right transition easing



  • Hello,

    so far I absolutely love everything about the upcomming version 1! I’m so excited for the release! Outstanding work!! :DD
    …But there is one thing I don’t like and it really bothers me: The slide-left, slide-right, and so on transitions. I like them in pre-v1 much, much more.

    It affects for example this:

    <q-menu
      transition-show="slide-left"
      transition-hide="slide-right"
    >
    

    Or this:

    <q-tab-panels v-model="panel" animated>
    

    And you can also see it when you click on the tabs inside the documentation pages.

    It doesn’t affect for example the QSlideTransition component or the QDrawer or QExpansionItem reveal. Those look fine.

    I don’t know how to put it… it’s not the speed or the smoothness, it’s the animation curve that goes like “WHOOSH! In your face”. I wish it was more… idk, easefully.
    When I first encountered it while browsing the v1 documentation pages, it literally made me jump a bit! 😕
    If you don’t know what I mean, I feel like the transition is more like “easeInOutCirc” as described here: https://easings.net/en (but I can’t exactly tell). But I would rather have something like “easeInOutQuart” or something in that direction - it’s the middle part that is too hectic for my taste.


    Is there maybe an option that I missed? Or is it planned?
    My suggestion is that the the default transition should be changed. Or that there is an option (maybe even global) to change it so that it looks more like pre-v1.

    What are your thoughts on that?


  • Admin



  • Wow! Awesome! I did not expect it to be changed right away ☺
    Thanks for the response! I appreciate this improvement.

    Now that I think about it, maybe “easeInOutQuad” or even “easeOutQuart” would look nice, too (I haven’t tried it out)^^
    But now I know that there are css rules which I could customize 🙂 I haven’t thought about that


  • Admin

    Personally I don’t see much difference, since the animation is so fast.
    Whatever you do, don’t change the timer of the animations (let it be 0.3s).



  • You are right, there is indeed not much difference at for this animation duration.

    I have now tried out a few options and I came to the conclusion that it definitely should be easeOutCubic (see https://easings.net/de#easeOutCubic ). At least in my opinion.

    I have made a little demonstration: https://jsfiddle.net/uvz4gam3/ (don’t look at the code; only consider the result window)
    There you can see (when you switch the tabs) some different easing curves:

    • The red one is the original (before your commit)
    • The orange one is the change you have made (looks the same)
    • And the blue one is the one I think looks the best

    If you would change the default transition to that, I would be super happy


  • Admin

    Brilliant demo. Puts things in perspective much easier.
    Changed to easeOutCubic. (will be in beta.12).


  • Admin

    Feel free to connect with me on Discord (Razvan) if you envision more enhancements that can be made.



  • @rstoenescu Very nice. Thanks!


Log in to reply