Skill-Bars animation not working

[rehanmahmood]

I am trying to build a simple skill bar

set up like so:

import React from "react"; import "./Skills.css"; import SkillBar from "react-skillbars";

const SKILLS = [ { type: "Python", level: 80 }, { type: "React", level: 55 }, { type: "JavaScript", level: 55 }, { type: "Git", level: 50 }, { type: "HTML", level: 90 }, { type: "CSS", level: 90 }, { type: "Django", level: 45 }, { type: "Reading", level: 90 }, ];

export default function Skills() { return (

My Skills

); }

The bars appear but no animation is present. Any ideas as to why this is happening?

[rburchDev]

I am potentially facing a similar issue. I have a Skills.js file with the following:

const Skills = [
    {
      "type": "Java",
      "level": 100,
      "color": {
        "bar": "#3498db",
        "title": {
          "text": "#fff",
          "background": "#2980b9"
        }
      }
    },
    {
      "type": "React",
      "level": 85,
      "color": {
        "bar": "#4288d0",
        "title": {
          "text": "#fff",
          "background": "#124e8c"
        }
      }
    },
    {
      "type": "Javascript",
      "level": 75,
      "color": {
        "bar": "#2c3e50",
        "title": {
          "text": "#fff",
          "background": "#2c3e50"
        }
      }
    },
    {
      "type": "Spring",
      "level": 50,
      "color": {
        "bar": "#5a68a5",
        "title": {
          "text": "#fff",
          "background": "#46465e"
        }
      }
    },
    {
      "type": "Docker",
      "level": 25,
      "color": {
        "bar": "#525252",
        "title": {
          "text": "#fff",
          "background": "#333333"
        }
      }
    },
    {
      "type": "HTML",
      "level": 20,
      "color": {
        "bar": "black",
        "title": {
          "text": "#111",
          "background": "#fff"
        }
      }
    },
    {
      "type": "NoSQL",
      "level": 0,
      "color": {
        "bar": "#2ecc71",
        "title": {
          "text": "#fff",
          "background": "#27ae60"
        }
      }
    }
  ]

  export default Skills;

Then within a reactjs file I have:

import React from 'react';
import SkillBar from 'react-skillbars';
import Skills from './Skills'

function About() {
    return (
        <>
            <div className="aboutHeader">
                <h1>
                    <span>
                        About
                    </span>
                </h1>
                <div className="aboutContent">
                    <p>
                        Hello! 
                    </p>
                    <p>
                        Test:
                    </p>
                    <ul>
                        <li>
                            1
                        </li>
                        <li>
                            2
                        </li>
                        <li>
                            3
                        </li>
                        <li>
                            4
                        </li>
                    </ul>
                    <p>
                        Test:
                    </p>
                    <ul>
                        <li>
                            Python
                        </li>
                        <li>
                            ReactJS
                        </li>
                        <li>
                            Shell Script
                        </li>
                        <li>
                            Nginx
                        </li>
                    </ul>
                    <p>
                        Test
                    </p>
                </div>
            </div>
            <span className="skillBar">
                <SkillBar skills={Skills} />
            </span>
        </>
    );
}

export default About;

It seems that by having the SkillBar tag after a ul tag, the animation is not working. If I remove the ul tag or move the SkillBar tag above, the animation works.

EDIT My issue might have something to do with where the tag is in the window. Seems if the SkillsBar tag is touching the bottom of the window, then the animation does not work. However, if it is above the bottom of the window, then the animation works.

[crisboarna]

Hi,

I have updated the package to use IntersectionObserver API now for viewport detection to trigger the animation which should be more resilient for such scenarios.

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