带有滚动条的动画进度条Gsap和ScrollMagic

编程问答 2022-06-04

问题描述

（对不起，我英语不好，我是法语）

我想调用函数“ bar.animate（1.0）”来运行进度条并将其与滚动条一起使用，但是我不知道如何在时间轴中添加它。我将Greensock和ScrollMagic用于时间轴，将https://github.com/kimmobrunfeldt/progressbar.js用于进度条。

如果有人可以帮助我，那就太好了。

谢谢大家

// This is my progress bar

var bar = new ProgressBar.Circle('#progressBar1',{
    strokeWidth: 6,easing: 'easeInOut',duration: 1400,color: '#fbb124',trailColor: '#191c23',trailWidth: 0,svgStyle: {
        display: 'block'
    },text: {
        value: '<i class="fab fa-react fa-3x"></i>'
    }
  });
  bar.text.style.color = '#7a89ab'
  bar.text.style.fontSize = '3em'
  bar.animate(1.0);




// And this is my timeline 

const skillsContainer = document.querySelector('#skills');
const skillsTitre = document.querySelector('.skills-titre');
const skillsSousTitre = document.querySelector('.skills-soustitre');
const skillsHr = document.querySelector('.skills-hr');
const skillsHeader = document.querySelector('.skills-header');

const TLS = new TimelineMax();

TLS
.from(skillsTitre,{y: -100,opacity: 0,duration: 0.6})
.from(skillsSousTitre,{y:-20,duration: 0.6},'-=0.4')
.from(skillsHr,{y: -10,duration: 0.4},'-=0.4')
.from(skillsHeader,{y: -20,duration: 0.5})
// I'd like to animate my progress bar here
.call(bar.animate,['1.0']) // something like that

const scene2 = new ScrollMagic.Scene({
    triggerElement: skillsContainer,triggerHook: 0.5,reverse: false
})
.setTween(TLS)
.addindicators()
.addTo(controller)

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

gsapjavascriptprogress-barscrollscrollscrollscrollmagic