react-fullpage | Create Fullscreen Scrolling Websites | Frontend Framework library

This seems like a perfect example for useContext() hook, since you need to pass data to several components on different tree levels.

Your code might look like this:

Though React-17 has been recently released. There may occur some errors with some packages. Try downgrading to the previous stable version of React.

Go to your package.json replace "react-dom": "^17.0.1", and "react": "^17.0.1", with "react-dom": "^16.13.1", and "react": "^16.13.1".

Then do a npm install in the terminal to get it started.

You can set the initial section using the active class: https://codesandbox.io/s/react-fullpagejs-example-b618h

Ok, so the thing is that react-vivus is a small wrapper arround vivus.js, but is not really complete. The creator of the library didn't let any way to call the methods from vivus.js such as play that you want to call. He let himself an issue about this here by the way.

That said, what you want can be done with a bit of tricky code, like this :

Issue solved, the "section" class was being overwritten on the state change causing fullpage to fault. Proof of this @ https://codesandbox.io/s/recursing-lumiere-h50zs if anyone has any other ideas I'd be happy to hear.

If you wrap your setState calls with an if statement, I'd guess that that would remove the infinite loop?

I've created an updated code sandbox here, and it looks like it functions as you've designed:

https://codesandbox.io/s/p39w4z51pq

show = () => { if(!this.state.isFooterOpen) { this.setState({ isFooterOpen: true }); } }; hide = () => { if(this.state.isFooterOpen) { this.setState({ isFooterOpen: false }); } };

It seems that continuously firing .scrollIntoView() and setting the behaviour: 'smooth' parameter is cancelling out the animation as this function is only ment to be called once.

In your code you are trying to smoothly scroll to the direction but by continuously firing the wheel event and therefore continuously calling the .scrollIntoView() function the animation is cancelled out until the animation can play without being interrupted.

That is also the reason why the animation takes place after you stop scrolling.

The way to solve this would be to block any other calls to .scrollIntoView() as long as the scrolling animation is going on. I found this question on how to know when the scrolling is done.

Why did your attempts of adding a fullpage-scrolling react library fail?