Feature Idea: more fine-grained options for animateScroll

[Rasso Hilber]

It would be nice if we had more fine-grained control over the behavior of animateScroll. For example, animating the scroll on samePage and samePageWithHash might be desired, but animating it on contentReplaced could not be wanted.

I have been able to hack this behavior together (smooth scrolling for samePage and samePageWithHash, no smooth scrolling for regular transitions) like this:

// safe the scrollPlugin instance, so we can access it later in the livecycle:
const scrollPlugin = new SwupScrollPlugin({
  animateScroll: false
});

// instantiate swup with the scrollPlugin instance:
const swup = new Swup({
  // ...
  plugins: [
    scrollPlugin,
  ]
});

// Disable the handlers for scrollPlugin by default:
swup.off('samePage', scrollPlugin.onSamePage);
swup.off('samePageWithHash', scrollPlugin.onSamePageWithHash);

// opt-in to smooth scrolling for `samePage` and `samePageWithHash`:
swup.on('samePage', e => {
  scrollPlugin.options.animateScroll = true
  scrollPlugin.onSamePage()
});
swup.on('samePageWithHash', e => {
  scrollPlugin.options.animateScroll = true
  scrollPlugin.onSamePageWithHash(e)
});

// reset animateScroll each time after a scroll
swup.on('scrollDone', e => {
  scrollPlugin.options.animateScroll = false
});

I could imagine an API like this:

const swup = new Swup({
  // ...
  plugins: [
    new SwupScrollPlugin({
      animateScroll: false,
      animateScrollSamePage: true,
      animateScrollSamePageWithHash: true,
    }),
  ]
});

Or, using an optional object for animateScroll:

const swup = new Swup({
  // ...
  plugins: [
    new SwupScrollPlugin({
      animateScroll: {
        default: false,
        samePage: true,
        samePageWithHash: true
      },
    }),
  ]
});

What would you prefer? I would try to put together a PR if you think this makes sense.

Before creating this issue, did you think of...:

• Have you checked closed issues for similar/related problems.
• Have you provided all helpful information available?
• Have you considered creating a demo so we can help you better?

[Philipp Daun]

I've actually created a fork with an option like this. We could think about merging those changes, I just never came around to creating a PR.

[Rasso Hilber]

Nice! I just had a look at the related commit. I like it, but the current solution would be a breaking change in the API, since animateScroll is being removed from the options. Maybe a solution could be to use an optional object instead, like described above? Using your naming it could look like this:

const swup = new Swup({
  // ...
  plugins: [
    new SwupScrollPlugin({
      animateScroll: {
        betweenPages: false,
        onSamePage: true
      },
    }),
  ]
});

That way, we could make the old option still work if it's just a boolean, and set all object properties accordingly:

const swup = new Swup({
  // ...
  plugins: [
    new SwupScrollPlugin({
      animateScroll: true // or false
    }),
  ]
});
// ...could internally be transformed to:
animateScroll: {
  betweenPages: true,
  onSamePage: true
}

[Philipp Daun]

Sounds great! I'll try and add that and create a PR.