Whenever I scroll down, the particles updates itself.

[ffan0811]

There is a section that i want to make it position:fixed so that when i scroll down, i still can see the particles.

<div className={cx('first-wrapper', 'wrapper')}>
    <Particles params={{
                    'particles': {
                        'line_linked': {
                            'shadow': {
                                'enable': true,
                                'color': '#ff8d47',
                                'blur': 7
                            }
                        },
                        'color': {
                            'value': '#ff8d47'
                        },
                        'number': {
                            'value':70
                        }
                    }
                }} style={{position: 'absolute', width: '100%', height: '100%', left:0, top:0}} />
</div>

the class, 'wrapper', has this style

height: 100vh;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
transition: all .4s ease-in;
position: fixed;

However, When I scroll down, the particles update themseleves, new angles, new location etc. you know, when you refresh pages, the particles set differently because it sets randomly. I want them to be fixed. I dont understand why it updates itself. please help me :'(

[wufe]

As you can see in this demo I cannot reproduce the issue.
However I image it is due to component's update lifecycle:

When the component which contains the element gets re-rendered, the particles component gets re-rendered too. The mechanism by which react checks the differences between the DOM attributes cannot work with a canvas, so the particles library gets initialized again.

It probably is the same issue as #50 and #43.

You can try wrapping the Particles component into another component (wrapper) and control its shouldComponentUpdate or a PureComponent.

[ffan0811]

Thank you so much! I should've looked up more carefully before I asked. Thank you for the fast and clear answer.

[wufe]

You are welcome 😊