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

chyde90

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?

rstoenescu

Done. Will be available in beta.12.
https://github.com/quasarframework/quasar/commit/16b4682b285315bfcad9ef747c258099e40c53ee

chyde90

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

rstoenescu

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).

chyde90

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

rstoenescu

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

rstoenescu

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

chyde90

@rstoenescu Very nice. Thanks!

No More Posting New Topics!

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