admin管理员组文章数量:1321070
I am trying to rebuild this intro effect using ScrollMagic and GSAP: Notice how the intro 'slides' (with text) show and dissappear one after another when scrolling.
Basically, I have set up a stage controller, a scene (the containing div - '.hero-unit') and some tweens for the animation. However, I just can't get the hang of how to animate each slide (three in total) in such a order:
- You enter the website and start scrolling.
- The first slide is animated (using the staggerFromTo method).
- When the slide is fully animated, lower its opacity back to 0 (or move it out of the screen or whatever).
- Show the second slide, as in 2.
- Same as 3. and so on.
I tried everything that I managed to find as a solution on the internet. I tried using 'TimelineMax', tried hiding the slides when done animating them with onComplete, but nothing seems to work. Here's the code I have so far:
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);
To recap: how does one manage to stage different scenes and change between them with a nice transition while scrolling??
I am trying to rebuild this intro effect using ScrollMagic and GSAP: http://airnauts. Notice how the intro 'slides' (with text) show and dissappear one after another when scrolling.
Basically, I have set up a stage controller, a scene (the containing div - '.hero-unit') and some tweens for the animation. However, I just can't get the hang of how to animate each slide (three in total) in such a order:
- You enter the website and start scrolling.
- The first slide is animated (using the staggerFromTo method).
- When the slide is fully animated, lower its opacity back to 0 (or move it out of the screen or whatever).
- Show the second slide, as in 2.
- Same as 3. and so on.
I tried everything that I managed to find as a solution on the internet. I tried using 'TimelineMax', tried hiding the slides when done animating them with onComplete, but nothing seems to work. Here's the code I have so far:
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);
To recap: how does one manage to stage different scenes and change between them with a nice transition while scrolling??
Share Improve this question asked Feb 3, 2015 at 14:30 Georgi B. NikolovGeorgi B. Nikolov 9982 gold badges13 silver badges26 bronze badges 1- Okay, so I figured it out on my own. You have to use TimelineMax (or Lite I guess) and set up the different scenes movement relatively, using delays as such: – Georgi B. Nikolov Commented Feb 3, 2015 at 19:36
2 Answers
Reset to default 4Improving on your answer I would like to add that you can add the tweens to the timeline successively and they will automatically be added to the end of the timeline.
So a better way for your animation code would be:
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}));
This way the code is a lot more managable in case you want to add anything at any time. For more information check http://greensock./docs/#/HTML5/GSAP/TimelineMax/add/
If all you want to do is add a .to tween to the end of the timeline you can make this even more concise by making use of the TimelineMax.to() method.
From GSAP Docs:
Adds a TweenLite.to() tween to the end of the timeline (or elsewhere using the "position" parameter) - this is a convenience method that acplishes exactly the same thing as add( TweenLite.to(...) ) but with less code.
So this would make this the best possible GSAP animation code for your purposes:
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});
Okay, so I figured it out on my own. You have to use TimelineMax (or Lite I guess) and set up the different scenes movement relatively, using delays as such: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);
本文标签: javascriptAnimating multiple scenes in a sequence with ScrollMagicStack Overflow
版权声明:本文标题:javascript - Animating multiple scenes in a sequence with ScrollMagic - Stack Overflow 内容由网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:http://www.betaflare.com/web/1742089843a2420196.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论