albertogasparin/Optiscroll

Move trackTransition from JS to CSS

henryruhs opened this issue · 8 comments

henryruhs commented

Hello, it's me again...

trackTransition = 'height 0.2s ease 0s, width 0.2s ease 0s, opacity 0.2s ease 0s',

Please remove the whole trackTransition from JS, it does belong to the CSS side. Imagine a container that continuously is refreshing or just refreshed on a event - this is causing the scrollbar animation each time, what looks kind of ugly.

I need that !important hack at the moment:

.optiscroll-htrack, .optiscroll-vtrack {
    transition: none !important;
}
henryruhs commented

Please respond to this issue, I need this for my project...

albertogasparin commented

Well, I can make it configurable so you can override it and leave it blank.
However, I cannot remove it entirely because I want to animate the scrollbar to the new position if/when the scroll event if not firing fast enough (especially on mobile).

That behaviour is handled by scrollbar animateTrack method, which adds a temporary transform transition to the element default transitions. So, those transitions are currently hard coded because I don't want to query the element (it's expensive).

As said, I can add a trackTransitions option, which defaults to height 0.2s ease 0s, width 0.2s ease 0s, opacity 0.2s ease 0s, and you can override it.
Is this solution flexible enough for you?

henryruhs commented

I don't understand your problem here. Just remove it from the JS and put this into CSS:

.optiscroll-htrack, .optiscroll-vtrack {
    transition: height 0.2s ease, width 0.2s ease, opacity 0.2s ease;
}

This should be the same visual output...

albertogasparin commented

The problem is when, on mobile, you have to many things happening on the page and the scroll event is not fired fast enough. So the scrollbar position suddenly goes from top: 20px to top:200px.
In that case, I want to nicely animate the scrollbar to the new position (not making it feel jerky).
And in order to do so, the code adds this additional transition to the default ones.

henryruhs commented

I understand this but again, animations and styles do not belong into Javascript!

  1. Empty the variable trackTransition on line 474 in optiscroll.js
  2. Add the following CSS to optiscroll.css
.optiscroll-htrack, .optiscroll-vtrack {
    transition: height 0.2s ease, width 0.2s ease, opacity 0.2s ease;
}

It does the same animation now but I can customize it via CSS if I like to... what is the problem?

The method animateTrack should be removed also.

albertogasparin commented

Look at this line:

trackEl.style[cssTransition] = trackTransition + ', ' + cssTransformDashed + ' 0.2s linear 0s';

If I remove trackTransition entirely, that line will overwrite any other transition set on the track (like a fade in effect).
I agree with you that CSS would be better, but in the scenario I'm trying make Optiscroll play nicely (mobile + few scroll events), reading the element CSS transition value directly is not an option. Hence, I need to know which transitions you have attached to the track in order to preserve them.

BTW, what's wrong with your "hack"? Do you have any side effects or are you trying to achieve something different?

henryruhs commented

Like I said, you have to remove the animateTrack method also and move everything to a CSS file. So this is not a valid argument if this breaks something in your Javascript...

I wonder why we discuss about this that hard, CSS does not belong to Javascript - everything is said! If you force a user to user !important hacks, everything is lost...

albertogasparin commented

If you don't want that behaviour, feel free to fork this project 😉
Cheers.