Comments (5)
I also have the exact same issue, but with reactjs.
So, after a bit of tinkering and searching, I found out the problem exists because of React's Strict mode, which is also on by default in nextjs.
Now you can turn it off, by setting it to false in the next.config.js file:
const nextConfig = {
reactStrictMode: false, // React Strict Mode is off
}
module.exports = nextConfig
This will fix the immediate problem but it defeats the purpose of strict mode, which is a developer tool that helps detect quick re-render issues. So even with strict mode off, if your application is ever re-rendered quickly, the animation will break. So strict mode mimics this to try to get developers to clean up their useEffects. So you need to return a cleanup function that:
- Disables asscroll
- Stops the asscroll animation
- Destroys the asscroll instance
For this you'll need to also disable asscroll's default requestAnimationFrame and create your own, so you can stop the animation in the cleanup function. You can also destroy the asscroll instance by setting it to an empty object.
from asscroll.
Hi ! Have the same issue right here :/
i tried to use dynamic
from next/dynamic
also but same thing
from asscroll.
Thanks @jsskrh that worked well with React/NextJS you need to use a RaF hook instead of the default one from this lib
from asscroll.
Hey. Having the same issue. It happens even with asscroll.disable() in the cleanup function.
@jsskrh, could you explain how to stop the asscroll animation and destroy the asscroll instance?
from asscroll.
@MetamorphAlex A bit late but this was basically what I did on the clean up function
return () => {
asscroll.disable();
asscroll = undefined!;
}
from asscroll.
Related Issues (20)
- Fix auto-inversion of target position when using .scrollTo on touch devices
- Add a jumpTo type method HOT 1
- Scroll jumps up when enabling
- Scroll jumps back to initial start position on Nuxt? HOT 1
- Works in Codepen only HOT 1
- Jumps farther than expected in firefox HOT 2
- Is it possible to have tabindex inputs and buttons work with AsScroll? HOT 2
- Is it possible to disable AsScroll? HOT 1
- How to know when an element scrolls into view? HOT 2
- Window jumps to top when using a form in Safari v15.4 HOT 2
- Does not scroll while mouse is over iframe. HOT 4
- How to properly remove event listener on window.object? HOT 3
- Asscroll not working with scrolltrigger which consist horizontal scroll HOT 1
- Position fixed seems to kill performances on safari HOT 1
- Position Fixed Problems HOT 1
- Tab focus not working for horizontal scroll
- Not working with Next.js HOT 1
- Unable to scroll on div with absolute
- ASScroll is not working correctly on Mobile
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from asscroll.