Раскрыть на Свитке - ScrollMagic

Question

У меня есть таблица навыков, которая заполняется при загрузке документа. Я надеялся использовать ScrollMagi c, чтобы график заполнялся по мере его прокрутки.

Я пробовал несколько различных комбинаций классов и псевдоклассов в вызове функции setClassToggle и просто задавался вопросом, возможно ли это.

<div id="trigger2"></div>
<div class="wrapper">
 <h4>Singing</h4>
 <div class="line line1" id="line1">60%</div>
 <h4>Dancing</h4>
 <div class="line line2" id="line2">55%</div>
 <h4>Coding</h4>
 <div class="line line3" id="line3">20%</div>
</div>

.wrapper h4 {
  color: #00adb5;
  font-size: 22px;
  font-style: italic;
  font-weight: bold;
}

.line {
  color: #222831;
  font-size: 18px;
  height: 18px;
  line-height: 18px;
  margin: 0 auto 18px;
  padding: 0 0 0 18px;
  position: relative;
}

.line:before {
  content: "";
  width: 100%;
  position: absolute;
  left: 0;
  height: 18px;
  top: 0;
  z-index: 0;
  background: #222831;
}

.line:after {
  content: "";
  background: #d2d6d7;
  height: 18px;
  transition: 0.8s;
  display: block;
  width: 100%;
  animation: animate 1 5s;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}

.line1:after {
  max-width: 60%;
}

.line2:after {
  max-width: 55%;
}

.line3:after {
  max-width: 20%;
}

var controller = new ScrollMagic.Controller();

new ScrollMagic.Scene({
  triggerElement: "#trigger2",
  reverse: false, // only do once
})
  .setClassToggle("#line1", ":after")
  .addIndicators()
  .addTo(controller);

Любой предложения будут отличными, спасибо.

Answer 1

Я думаю, это то, что вы ищете. Это делается с помощью vanilla JS и IntersectionObserver. Дайте мне знать, если вам нужна дополнительная помощь! :)

document.addEventListener("DOMContentLoaded", function () {
    var elements = document.querySelectorAll(".line");

    // Intersection observer
    var observer = new IntersectionObserver((entries) => {
        entries.forEach((entry) => {
            if (entry.intersectionRatio > 0) {
                entry.target.classList.add("animate");
            } else {
                entry.target.classList.remove("animate");
            }
        });
    });

    elements.forEach((el) => {
        observer.observe(el);
    });
});

#trigger2 {
  min-height: 110vh;
}

.wrapper h4 {
  color: #00adb5;
  font-size: 22px;
  font-style: italic;
  font-weight: bold;
}

.line {
  color: #222831;
  font-size: 18px;
  height: 18px;
  line-height: 18px;
  margin: 0 auto 18px;
  padding: 0 0 0 18px;
  position: relative;
}

.line:before {
  content: "";
  width: 100%;
  position: absolute;
  left: 0;
  height: 18px;
  top: 0;
  z-index: 0;
  background: #222831;
}

.line:after {
  content: "";
  background: #d2d6d7;
  height: 18px;
  transition: 0.8s;
  display: block;
  width: 100%;
  animation: animate 1 5s;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}

.line1:after {
  max-width: 60%;
}

.line2:after {
  max-width: 55%;
}

.line3:after {
  max-width: 20%;
}

.line.animate:after {
  animation: animatedBar 2s ease-in-out;
}

@keyframes animatedBar {
  0% 
  {
    width: 0%;
  }
  100%
  {
    width: 100%;
  }
}

<div id="trigger2"></div>
<div class="wrapper">
 <h4>Singing</h4>
 <div class="line line1" id="line1">60%</div>
 <h4>Dancing</h4>
 <div class="line line2" id="line2">55%</div>
 <h4>Coding</h4>
 <div class="line line3" id="line3">20%</div>
</div>