Question

使用以下代码，我可以错开动画位置并淡化文本。但我想要完成的是移动，淡入，然后淡化所有副本滚动结束时返回0。所以移动工作正常。我只想让相同的<p>标签淡入，然后在滚动结束时退出。

// init controller to hold all commands/animations
const controller = new ScrollMagic.Controller({ addIndicators: true });

const tween1 = TweenMax
  .staggerTo('#parallax p', 1, {
    bottom: $('#parallax').height(),
    opacity: 1,
  }, 0.06);

// All commands/animations live in a scene
new ScrollMagic.Scene({
  // Element to watch
  triggerElement: '#parallax',
  // Point at which animation starts, default is center of screen
  triggerHook: 0, // 1 onEnter, .5 onCenter (Defualt), 0 onLeave
})
.setPin('#parallax')
.setTween(tween1)
.duration('100%') // Percentage of full screen or hard-wired number of pixels
.addIndicators({ name: 'FADES' }) // Indicators marked on screen
.addTo(controller); // Add this scene to controller

附带问题：如果动画是键控滚动ScrollMagic，则以下行中的1是什么：.staggerTo('#parallax p', 1, {？

修改：更合适CodePen added

Answer 1

更像这样的东西？ https://codepen.io/motionimaging/pen/155bf1892710fb95dcc81ddb7201adb0/

// init controller to hold all commands/animations
const controller = new ScrollMagic.Controller({ addIndicators: true });

var timeline = new TimelineMax();
var tween1 = TweenMax.staggerFromTo("#two p", 1, {bottom: 0},{bottom: $('#two').height()}, 0.1);

var tween2a = TweenMax.staggerTo("#two p", 0.5,{ opacity: 1 }, 0.1);

var tween2b = TweenMax.staggerTo("#two p", 0.35,{ opacity: 0 }, 0.1);

timeline.add(tween1, 0)
    .add(tween2a, 0)
    .add(tween2b, 0.5);

new ScrollMagic.Scene({
   triggerElement: "#two",
  triggerHook: 0,
})
.setTween(timeline)
.setPin("#two")
.duration("200%") 
.addIndicators({ name: "FADES" })
.addTo(controller);

如何在GSAP和ScrollMagic中为底部和不透明度属性设置动画？

1 个答案: