StreamMeDev / scroll-to

Smoothly scroll somewhere
ISC License
1 stars 0 forks source link

Needs support for more easing functions. #5

Open chanceeakin opened 7 years ago

chanceeakin commented 7 years ago

Saw that this only supports linear easing.

Would love to add support for more robust easing options.

cwebley commented 7 years ago

Hmm, thats not a bad idea and it'd be pretty simple to add.

right now the new scroll position is totally calculated with y = mx + b, we could definitely add some quadratic or higher order acceleration / deceleration. You can see what i'm using this for by heading to an archive page and clicking a new archive from the grid at the bottom of the page. Linear does seem a little jarring...

You're welcome to submit a PR if you have something particular in mind. Otherwise I probably won't get to this until it becomes a bit higher priority or if i implement scroll-to elsewhere

But if nothing else, we should make it clear via readme what type of function (linear at the moment) this module uses to calculate scroll position given a progress percentage

wesleytodd commented 7 years ago

Anyone have a proposed api? I think this would be a good addition.

cwebley commented 7 years ago

usage

scrollTo({
    x: 0,
    y: 0,
    type: 'decelerate'
});

implementation

window.scroll(calculateScrollPos({/*pass in x data including current position*/}), calculateScrollPos({/*pass in y data*/}));

//...
function calculateScrollPos (opts) {
    switch (opts.type) {
    case  'decelerate': // start fast, but decelerate quadratically
        return= -x^2 + b // or something
    case 'ease':
        // return -(x-.5)^2 + b // idk this is some oldschool math, but shift the parabola over a bit so scrolling accelerates until progress is 0.5 then decelerates
    default:
        // linear, same as current impl
        return = mx + b
    }
}
cwebley commented 7 years ago

although i feel like we will decide that a certain type looks nice just use that for everything

wesleytodd commented 7 years ago

So this builds the easing into this package. I think a better method would be to provide an easing function where you provide t and it should return the value to set it at. That way you could implement any easing methods you wanted, and this lib wouldn't care.

cwebley commented 7 years ago

ah i see, you pass your own scrollPos = -x^2 + something function as an option and if its available scrollTo uses that. otherwise it'll default to linear or something

yeah that's definitely better

cwebley commented 7 years ago

although if you're using scrollTo all over your app (this module will certainly blow up in popularity, just give it time) and you decide that a particular scrolling animation is a signature style of your app (maybe we should wiggle as we scroll?!), you'll have to pass in your equation every time you call scrollTo.

I guess that's okay though. scrollTo({type: 'wiggle'}) isn't much better than passing in your wiggle function every time, especially considering the loss of customizability.

i'd just be a little frustrated if i was reading the docs of an animation library and it said Want a simple easing-in animation? Do the math and pass it in as a custom option!

wesleytodd commented 7 years ago

What about adding a way to configure defaults? Either that or you have to do is wrap this module in your own little custom wrapper.