search

VikLiegostaiev / react-page-scroller

Simple React component for smoothy full-page scolling using CSS animations. React Page Scroller
https://github.com/VikLiegostaiev/react-page-scroller
MIT License
417 stars 84 forks source link

Changing state of child components inside Page Scroller #8

Closed xbreid closed 6 years ago

xbreid commented 6 years ago

Hello, I've been playing with your component and love that it's working with SSR so far.

I did notice however, that when attempting to change the state on any component inside the PageScroller wrapper when an onPageChange occurs nothing happens. I'm assuming that since these components are children on the parent PageScroller component there is nothing in the parent to trigger the state change.

I'm essentially trying to create onEnter and onExit entrance animations for each page component wrapped in the PageScroller. So when you re-enter the page component, an entrance animation will re-occur.

I'm wondering if there is a way to achieve this functionality, or a way to trigger a state change in those child components?

VikLiegostaiev commented 6 years ago

Hi @bar0191 , Thanks for your issue. I'll take a look soon and will give you an answer.

VikLiegostaiev commented 6 years ago

Hi, @bar0191 . Sorry for this delay, was busy. I found where the problem is and will try to fix it during this week.

marquez138 commented 6 years ago

Any luck on the fix?

VikLiegostaiev commented 6 years ago

@bar0191 @marquez138 Finally I have fixed this. Can you please take a look if all is fine now? https://github.com/VikLiegostaiev/react-page-scroller/tree/1.4.0

VikLiegostaiev commented 6 years ago

Now it should rerender your components after state changes.

marquez138 commented 6 years ago

Thats great really appreciate the work on this component. I'm a bit new to react and was wondering how I would be able to add animations to the state changes as mentioned above by bar0191, would you be kind enough to point me in the right direction? I would really like to use either GSAP or Popmotion/Pose for the enter/leave animations. Any help would be greatly appreciated

VikLiegostaiev commented 6 years ago

@marquez138 pageOnChange event is called before page changes. You can pass pageOnChange callback to props and set the local state of your component inside of this callback. After set change your components are rerendered and you can do any action in e.g. componentDidUpdate. See docs for more info because I am not familiar with the libraries you've mentioned.

marquez138 commented 6 years ago

That helps alot thanks again!

marquez138 commented 6 years ago

Is it possible to show an example of how you write this on the FirstComponent? I thought i would be able to by myself but im really stuck. Thanks