stanko / animated-scroll-to Goto Github PK

When you set cancelOnUserAction to true and after scroll animation is interrupted by user's action, the onComplete never gets called. It would be nice to know if animated completed even if it was interrupted in the middle. I would like to help with PR, so just let me know if that's a good idea.

I was hoping to use this to implement a horizontal carousel. I was sad to see that it only supports vertical scrolling.

Would this be difficult to add?

I want to scroll to an element

And it needed to be located from the bottom of the screen.

Just like element.scrollIntoView({block: "end"})

It doesn't seem to matter which values I assign to option speed: the animation remains identical in all cases. Also tried to play around with maxDuration and minDuration. Nothing makes the animation speed change.

const defaultOptions = {
  maxDuration: 2000,
  minDuration: 2000,
  speed: 3000
}

const defaultOptions = {
  speed: 5000
}

const defaultOptions = {
  maxDuration: 2000,
  speed: 8000
}

animatedScrollTo(el, defaultOptions)

Hi,Is this library compatible with react ?..... i mean does it follow the guidelines of react of not manipulating the DOM directly ?

Trying to include this in my file using import animateScrollTo from 'animated-scroll-to'; and I get the error:

error: Error: 'default' is not exported by node_modules\animated-scroll-to\animated-scroll-to.js with layout.js

Bundling using babel.js and rollup.js, all other imports are working fine.

It would be very useful to have animateScrollTo() return a Promise object. This would help a lot in environments where scrolling is part of a bigger animation path.

animateScrollTo(node, { offset: -100 })
   .then(node => console.log('scrolled to', node))

comment script tag cause some problem when i use in iframe in development mode, can you remove it?
in 352, thank you.

Hello, I'm trying to make your plugin work for me without any chance for now..

Here is my vanilla JS code

And render HTML in google chrome console,

In plain english, what I am trying to achieve is :

When I click on the button with the class js-trigger, the container #section--vertical will scroll to the element #slide__project--first

Perhaps I am using your function animateScrollTo wrong ...

Can you help me out ?

Can you update the CHANGELOG.md since you published a v2 version? My project is not running with the new version v2 so I want to know why.

Having scroll-behaviour set to smooth in css:

:root {
  scroll-behaviour: smooth
}

is breaking / delaying this plugins' animation (in Chrome). Found out after some trial and error that this is the default in bootstrap-5.0.0@beta2. Same thing is happening with similar packages.

Example: https://codepen.io/kapoko/pen/rNWbXxN

This setting is probably gonna be used more often. You think it's worth mentioning in the docs?

Animated scroll is perfect for my use case except I would like to use a different easing curve. Have you considered adding support for custom curve functions? If not do you have any advice on the best way to modify the code to alter the current easing?

Many thanks in advance.

It don't work on my mobile applications , can I need smoothscroll.polyfill to compatibility ?

Sorry, please ignore this.

Hey,

it works very well on all desktop browsers, but not on iOS ones.

I'm getting this warning in my Chrome inspector console from this package:

[Violation] Added non-passive event listener to a scroll-blocking 'wheel' event. 
Consider marking event handler as 'passive' to make the page more responsive.

What it is

Solution

I'm going to try to create a PR soon with a fix.

When cancelOnUserAction is set to false, Chrome throws the following error multiple times during an animated scroll:

Unable to preventDefault inside passive event listener invocation.    [animated-scroll-to.js:134]

Was it intended removal?

A lot of big libraries in react written in typescript are using module commonjs for a better compatibility. You can see here material-ui https://github.com/mui-org/material-ui/blob/master/tsconfig.json#L3

Could you consider switching to commonjs in compilerOptions module?

Hello,
I had this issue while working with the library, I pass an horizontal element to be animated and also cancelOnUserAction: false but the whole page loses the scroll behaviour.

I fixed it by changing the window listeners of wheel, scroll and touch start to options.element

It looks like the typings for this library are not properly 'done' yet. Looks like it was only updated to use typescript 30 days ago.

The original index.d.ts typings need to be removed and the the up to date typings need to be defined.

Looks like the typings in npm package are the generated ones by tsc --declaration (they are included in the npm package)
https://github.com/Stanko/animated-scroll-to/blob/master/package.json#L12

And the type definitions are defined by package.json
https://github.com/Stanko/animated-scroll-to/blob/master/package.json#L6

It however also looks like the output folder ./lib is git ignored which is why they're probably not in the repo.
https://github.com/Stanko/animated-scroll-to/blob/master/.gitignore#L9

To do

1. Exclude 'lib' from .gitignore
2. Include the animated-scroll-to.d.ts type definition in the repo
3. Delete v1 index.d.ts type definition

Hello,

When you pass an element to animatedScrollTo(myElement) it will scroll to it in both direction (horizontal and vertical), but in my case i wanted to scroll only vertically to that element.

Do you think it's possible to add properties which limits the scroll only in one direction?

The new 2.0.+ versions reference window when requiring the package. This breaks SSR apps, as window is not defined when running in a node environment. In 1.2.2 the problem was not present. It is very easy to reproduce.

mkdir anim-ssr-bug
cd anim-ssr-bug
npm install animated-scroll-to
node
> const a = require("animated-scroll-to")

result:

ReferenceError: window is not defined
    at Object.<anonymous> (/Users/csorfab/Web/test/node_modules/animated-scroll-to/lib/animated-scroll-to.js:95:22)
    at Module._compile (internal/modules/cjs/loader.js:688:30)
...

Would be awesome!

When you set "cancelOnUserAction" to FALSE, the function ignores it because it checks its value and because it is FALSE it takes the default value.

Trying to do a simple scroll to element using useRef in a Typescript project but getting the following error:

Code looks like this.

const Home: NextPage<Props> = ({ pagedata }) => {

  const infoRef = useRef<HTMLElement>(null);

  return (
    <>
      <nav>
        <button
          onClick={() => {
            animateScrollTo(infoRef.current);
          }}
        >
          Information
        </button>
      </nav>

      <main className={styles.main}>
        <Projects data={pagedata ? pagedata.data.projects : null} />
      </main>
      <section ref={infoRef} className={styles.info} id="information">
        <InfoSection data={pagedata} />
      </section>
    </>
  );
};

export default Home;

Not sure what I'm doing wrong here, seems to want a number as the parameter, but I can't change the definition on the ref or it gets upset that I'm passing an element.

I have an issue with old android 4.3 native browser. requestAnimationFrame is not supported for that version.

My suggestion is create a function which will check for requestAnimationFrame.
var requestAnimFrame = (function(){return window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||function(callback){window.setTimeout(callback,1000/60);};})();

and instead of requestAnimationFrame use it requestAnimFrame

is it possible to also support navigation with the keyboard keys ?

atm in my app instead of only relying on the mouse, i also offer to use the keyboard arrow keys which is much easier and quicker than the mouse,
hoever atm the lib use the keydown event to stop the scroll

so is there a way to add an option to enable that for those who needs it ?

I think that this one should be a devDep https://github.com/Stanko/animated-scroll-to/blob/master/package.json#L47. No?

This issue will be used as a main thread of communication for the version 2.

We just started, more info coming soon.

Todo

• Setup TypeScript (module + window.animateScrollTo)
• Refactor library
• New method signatures
  • (y, options)
  • ([x, y], options)
  • (element, options)
• Diagonal scroll
• Add custom easing to options
• Tests
  • Setup CircleCI
• Fail silently on server
• Two synchronous calls on the same element should cancel each other (they should)
• Better demo

Maybe

• TBD remove cancelOnUserAction (consider it always to be true) just defaults to true
• Promise interface #23

Breaking Changes

• New method signatures
• Removed horizontal option

I have a scrollTo function which is invoked on a button click.

scrollTo = (elem) => {
    animateScrollTo(document.getElementById(elem));
};

However, when I try to add some offset to adjust for padding, it doesn't scroll at all.

scrollTo = (elem) => {
    animateScrollTo(1000, {
      offset: 100,
      element: document.getElementById(elem),
    });
  };

In v2 this code
import animateScrollTo from 'animated-scroll-to';

Get me this error : Cannot find module 'animated-scroll-to' from 'scrollTo.js'

I use create-react-app vanilla without typescript.

Hi @Stanko , first of all thanks for the library, it solve a big need!
My question is about setting the default options during the import.
Is it possibile?
import animateScrollTo from 'animated-scroll-to'; window.animateScrollTo = animateScrollTo;
What i've to do before assigning it to global window object?

When building version 2.0.11 using node 14 and TypeScript 3.8.3, this error results:

ERROR in node_modules/animated-scroll-to/lib/animated-scroll-to.d.ts:1:33 - error TS1005: ',' expected.

1 export declare type TCoords = [x: number | null | undefined, y: number | null | undefined];
                                  ~
node_modules/animated-scroll-to/lib/animated-scroll-to.d.ts:1:63 - error TS1005: ',' expected.

1 export declare type TCoords = [x: number | null | undefined, y: number | null | undefined];

Hello, this library has been working very well for me, but I have tested it on the latest version of Firefox (61.0b10), and it is now not animating smoothly.

I am on Debian 9.4 (64-bit). On Firefox 52.8.1 it is fine, as it is on Chromium 66.0.3359.117.

If it helps, here are some plugins that animate smoothly on the newest Firefox:

• https://noeldelgado.github.io/pisces/
• https://cferdinandi.github.io/smooth-scroll/
• https://hsnaydd.github.io/moveTo/demo/
• https://tsuyoshiwada.github.io/sweet-scroll/

And here are some that are affected by the same problem (in case cross-comparing them helps you find the bug):

• https://bupy7.github.io/js-animate-scroll/
• https://github.com/serieseight/tinyscroll

Either way, thank you for this plugin, it has a nice API and I would prefer to continue using it.