如何解决ScrollMagic中是否有办法使setPin持续时间等于时间而不是滚动距离?
我有一个补间,可通过滚动到固定的特定部分来触发,然后播放动画。现在,它在触发时播放,与滚动无关,但图钉本身设置为滚动。因此它会播放动画,您必须滚动500像素才能取消固定该部分。理想情况下,插针将持续补间的持续时间,例如500毫秒,而不必滚动像素来取消插针。这可能吗?
以下是当前设置方式的代码:
// // build scenes
this.controller = new ScrollMagic.Controller();
let tl = new TimelineMax();
tl.fromTo(
".gradient_lord",0.5,{ css: { transform: "translateY(100%)" } },{ css: { transform: "translateY(0%)" } },"+=.7"
);
tl.fromTo(
"header.header_headline",1,{ css: { opacity: "0" } },{ css: { opacity: "1" } },"-=.03"
);
new ScrollMagic.Scene({
triggerElement: "#TextContent",duration: "25%",triggerHook: 0,})
// .addIndicators({
// colorTrigger: "red",// colorStart: "red",// colorEnd: "red",// indent: 5,// })
.setPin("#TextContent")
// .setClassToggle("#GradDad","hello")
// .on("enter",this.sceneEnter)
.setTween(tl)
// .on("progress",function (event) {
// console.log("Scene progress changed to " + event.progress);
// })
.addTo(this.controller);
new ScrollMagic.Scene({
triggerElement: "#TextContent",// duration: 800,// })
.setTween(tl)
// .on("progress",function (event) {
// console.log("Scene progress changed to " + event.progress);
// })
.addTo(this.controller);
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。