Question

我正在使用Scrollmagic和GSAP为具有不同期望效果的固定场景制作动画：

沿不同方向滚动背景图像（在固定的元素中同时运行多个补间）
已将不透明度从0变为1的动画（在同一持续时间内在同一场景中运行独立补间）

我正在使用GSAP的fromTo在滚动条上为背景图像提供平滑的补间，并且该部分效果很好。每个fromTo的位置参数属性都设置为0，因此它们可以同时运行：

var slideAnimation = new TimelineMax()
.fromTo(".frame.frame2", 1, {y:  "0%"}, {y: "300%", ease: Linear.easeNone}, 0) 
.fromTo(".frame.frame1", 1, {y:  "0%"}, {y: "-300%", ease: Linear.easeNone}, 0)
.fromTo(".frame.frame4", 1, {y:  "-100%"}, {y: "200%", ease: Linear.easeNone}, 0)
.fromTo(".frame.frame3", 1, {y:  "100%"}, {y: "-200%", ease: Linear.easeNone}, 0)
.fromTo(".frame.frame6", 1, {y:  "-200%"}, {y: "100%", ease: Linear.easeNone}, 0) 
.fromTo(".frame.frame5", 1, {y:  "200%"}, {y: "-100%", ease: Linear.easeNone}, 0) 
.fromTo(".frame.frame8", 1, {y:  "-300%"}, {y: "0%", ease: Linear.easeNone}, 0)
.fromTo(".frame.frame7", 1, {y:  "300%"}, {y: "0%", ease: Linear.easeNone}, 0); 0);

它会在滚动时移动背景图像并达到所需的效果： https://codepen.io/rcneil/pen/Mzjjma

当我希望使文本覆盖淡入淡出并独立于背景图像动画运行时，问题就来了。我对于应该使用to还是stagger或设置什么感到困惑。我尝试将它们添加到时间轴中，并将position属性设置为时间，而不是同时0：

.to(".quote1", 1, {autoAlpha: 0}, {autoAlpha: 1}, '.5s')
.to(".quote1", 1, {autoAlpha: 1}, {autoAlpha: 0}, '1.0s')
.to(".quote2", 1, {autoAlpha: 0}, {autoAlpha: 1}, '1.5s')
.to(".quote2", 1, {autoAlpha: 1}, {autoAlpha: 0}, '2s')
.to(".quote3", 1, {autoAlpha: 0}, {autoAlpha: 1}, '2.5s')
.fromTo(".frame.frame2", 1, {y:  "0%"}, {y: "300%", ease: Linear.easeNone}, 0) 
.fromTo(".frame.frame1", 1, {y:  "0%"}, {y: "-300%", ease: Linear.easeNone}, 0)
.fromTo(".frame.frame4", 1, {y:  "-100%"}, {y: "200%", ease: Linear.easeNone}, 0)
.fromTo(".frame.frame3", 1, {y:  "100%"}, {y: "-200%", ease: Linear.easeNone}, 0)
.fromTo(".frame.frame6", 1, {y:  "-200%"}, {y: "100%", ease: Linear.easeNone}, 0) 
.fromTo(".frame.frame5", 1, {y:  "200%"}, {y: "-100%", ease: Linear.easeNone}, 0) 
.fromTo(".frame.frame8", 1, {y:  "-300%"}, {y: "0%", ease: Linear.easeNone}, 0)
.fromTo(".frame.frame7", 1, {y:  "300%"}, {y: "0%", ease: Linear.easeNone}, 0);

，但似乎没有任何影响。无论如何，它们似乎都同时发射： https://codepen.io/rcneil/pen/xQEEyP

我要解决这个错误吗？您是否可以不在同一时间轴上使用它们，如果没有，那么如何在相同的固定元素上制作不同的“场景”动画？

带有图钉元素的GSAP TimelineMax同时和触发/延迟补间-Scrollmagic

0 个答案: