Question

Hello Stack溢出了人们。尽管使用scrollmagic和GSAP可以利用此功能，但我遇到的问题更多是数学问题和/或理解scrollTo插件，所以...

我试图模仿滚动动画，这是更大的动画的一部分，一旦动画到达某个点，我想让位于动画下方的另一个div进入视图。

第1步：将要显示的外部容器捕捉到屏幕顶部。

第2步：将第二个内部div捕捉到窗口顶部

第3步：使容器底部在页面底部对齐。

我希望我只是在这里遗漏了一些非常明显的东西。但是我无法弄清楚如何知道将外部容器带到多远，以便最后一步与窗口底部齐平。

使用容器的top属性可以看到执行此操作的第一次尝试，如下所示： https://codepen.io/sias/pen/vzZWwN

var tlMain = new TimelineMax({});
  tlMain

    .to(".dot", 1, {left:"90%"})
    .to(".below-animation", 1, {top:"0vh"})
    .to(".below-animation", 1, {top:-700}, "+=.5")
    .to(".below-animation", 1, {top:-1100}, "+=1")

如果窗口的高度恰到好处，这将起作用，但是当您调整窗口的大小时，这显然不是响应式的解决方案。

第二次尝试（我认为是更合适的方法）将基于以下问题的答案： auto scroll to bottom of page with jquery

在这里，我正在尝试为GSAP使用scrollTo方法插件。但是我没有那么做，因为出于某种原因，scrollTo方法没有影响它试图操纵的div。因此，当前该解决方案不可行。 https://codepen.io/sias/pen/yxXppZ

var tlMain = new TimelineMax({});
  tlMain

    .to(".dot", 1, {left:"90%"})
    .to(".below-animation", 1, {scrollTo:0})

请让我知道是否有人对最佳解决方案有任何想法。

虚假滚动到页面底部

0 个答案: