SkillBar Collapsed not updating

[rburchDev]

I am facing an issue when using SkillBar within a single page React site. The issue seems to be with the collapsed state not changing from true -> false when the 'page' with the SkillBar becomes visible.

If I put SkillBar in the 'first page' it animates. However, if I place SkillBar within the 'second page' it does not animate.

My Main.jsx looks like this,

import React from 'react';
import { Home, About, Projects } from './';

const Main = () => (
    <main>
        <Home />
        <About />
        <Projects />
    </main>
);

export default Main;

The 'About' page is the one which contains the SkillBar. If I put the 'About' page before the 'Home' page, the SkillBar animates correctly. When in the second position it does not animate.

Not sure what else to do to get the animation to work in my instance.

[crisboarna]

Hi,

As mentioned in #199 , using IntersectionObserver should handle the edge case scenarios being a standardized API for this.

Hopefully you will try it out in a future project of yours :)