Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Needs support for more easing functions. #5

Open
chanceeakin opened this issue Sep 28, 2016 · 8 comments
Open

Needs support for more easing functions. #5

chanceeakin opened this issue Sep 28, 2016 · 8 comments

Comments

@chanceeakin
Copy link

Saw that this only supports linear easing.

Would love to add support for more robust easing options.

@cwebley
Copy link
Member

cwebley commented Sep 28, 2016

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
Copy link
Contributor

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

@cwebley
Copy link
Member

cwebley commented Sep 28, 2016

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
Copy link
Member

cwebley commented Sep 28, 2016

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

@wesleytodd
Copy link
Contributor

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
Copy link
Member

cwebley commented Sep 28, 2016

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
Copy link
Member

cwebley commented Sep 28, 2016

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
Copy link
Contributor

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants