如何解决带有滚动条的动画进度条Gsap和ScrollMagic
(对不起,我英语不好,我是法语)
我想调用函数“ 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 举报,一经查实,本站将立刻删除。