我正在尝试使用ScrollMagic和GSAP重建此介绍效果:http://airnauts.com请注意滚动时介绍“幻灯片”(带文本)如何显示和消失。
基本上,我已经设置了一个舞台控制器,一个场景(包含div - '.hero-unit')和动画的一些补间。但是,我只是不知道如何以这样的顺序为每张幻灯片(总共三张)制作动画:
我尝试了所有我在互联网上找到的解决方案。我尝试使用'TimelineMax',尝试在使用onComplete进行动画制作时隐藏幻灯片,但似乎没有任何效果。这是我到目前为止的代码:
var pinOrigin = {
opacity: 0
};
var pinEnd = {
opacity: 1,
yoyo: true,
ease: Back.easeOut
}
var tl = TweenMax.staggerFromTo('.hero-unit .scene:first-of-type', 1, {opacity:0}, {opacity: 1});
var pin = new ScrollScene({
triggerElement: '.hero-unit',
triggerHook: 'onLeave',
duration: 1000
}).setPin('.hero-unit').setTween(tl).addTo(controller);
回顾一下:如何在滚动时如何管理不同的场景并在它们之间进行转换?
答案 0 :(得分:2)
改进your answer我想补充一点,您可以连续将补间添加到时间轴,它们会自动添加到时间轴的末尾。
因此,动画代码的更好方法是:
var tl = new TimelineMax()
.add(TweenMax.to('.hero-unit .scene:first-of-type', 1, {opacity: 1}))
.add(TweenMax.to('.hero-unit .scene:first-of-type', 1, {opacity: 0}))
.add(TweenMax.to('.hero-unit .scene:nth-of-type(2)', 1, {opacity:1}))
.add(TweenMax.to('.hero-unit .scene:nth-of-type(2)', 1, {opacity:0}))
.add(TweenMax.to('.hero-unit .scene:nth-of-type(3)', 1, {opacity:1}))
.add(TweenMax.to('.hero-unit .scene:nth-of-type(3)', 1, {opacity:0}));
这样,如果您想随时添加任何内容,代码会更加可管理。 有关详细信息,请查看http://greensock.com/docs/#/HTML5/GSAP/TimelineMax/add/
如果要做的只是在时间轴的末尾添加.to补间,可以使用TimelineMax.to() method使其更加简洁。 来自GSAP Docs:
将TweenLite.to()补间添加到时间轴的末尾(或使用“position”参数的其他地方) - 这是一种方便的方法,可以完成与添加完全相同的操作(TweenLite.to(...) )但代码较少。
因此,这将使您成为最适合您的GSAP动画代码:
var tl = new TimelineMax()
.to('.hero-unit .scene:first-of-type', 1, {opacity: 1})
.to('.hero-unit .scene:first-of-type', 1, {opacity: 0})
.to('.hero-unit .scene:nth-of-type(2)', 1, {opacity:1})
.to('.hero-unit .scene:nth-of-type(2)', 1, {opacity:0})
.to('.hero-unit .scene:nth-of-type(3)', 1, {opacity:1})
.to('.hero-unit .scene:nth-of-type(3)', 1, {opacity:0});
答案 1 :(得分:1)
好的,所以我自己想出来了。您必须使用TimelineMax(或Lite我猜)并相对设置不同的场景运动,使用延迟:a
var tl = new TimelineMax().add([
TweenMax.to('.hero-unit .scene:first-of-type', 1, {opacity: 1}),
TweenMax.to('.hero-unit .scene:first-of-type', 1, {opacity: 0, delay: 1}),
TweenMax.to('.hero-unit .scene:nth-of-type(2)', 1, {opacity:1, delay: 2}),
TweenMax.to('.hero-unit .scene:nth-of-type(2)', 1, {opacity:0, delay: 3}),
TweenMax.to('.hero-unit .scene:nth-of-type(3)', 1, {opacity:1, delay: 4}),
TweenMax.to('.hero-unit .scene:nth-of-type(3)', 1, {opacity:0, delay: 5})
]);
var pin = new ScrollScene({
triggerElement: '.hero-unit',
triggerHook: 0,
duration: 2000
}).setPin('.hero-unit').setTween(tl).addTo(controller);