在 Reveal.js 中使用 Greensock TweenMax

【问题标题】：Use Greensock TweenMax inside Reveal.js在 Reveal.js 中使用 Greensock TweenMax
【发布时间】：2014-05-20 17:57:05
【问题描述】：

我正在尝试在 Reveal.js 中使用 Greensock TweenMax 制作动画，但它无法正常工作。例如：

TweenMax.to(logo, 2, {x:"500px"});

第二个参数是动画的持续时间，但在 Reveal.js 中实现它就像延迟一样工作。我正在尝试使用 TimelineLite，但它根本不起作用。

有人可以举例说明如何正确使用 greensock 和reveal.js 吗？

【问题讨论】：

请编辑问题以将其限制为具有足够详细信息的特定问题，以确定适当的答案。请提供您如何尝试解决问题的详细信息。请参阅How to Ask 页面以获得澄清此问题的帮助。

标签： javascript gsap reveal.js

【解决方案1】：

转至http://www.greensock.com/jump-start-js/ 以查看有关如何编写代码的提示。

其次，使用TweenMax.to(logo, 2, {x:"500px"});，以x作为补间元素可能会出错。这个可以在AS3中使用，但是在javascript中，Greensock的人推荐使用top, left, etc.，比如TweenLite.to(logo, 1, {left:"632px"});

另外，请查看我的最后一个问题，我相信您会发现它很有用：How to trigger a GSAP function when a slide comes active with Reveal.js?

希望对你有帮助。

【讨论】：

这不正确，在 HTML 中为 x 值设置动画在性能方面比实际的左侧元素要好得多。因为 { x: "500px" } 与 transform: translateX(500px); 相同这实际上是 Greensock 推荐的，而不是移动绝对位置。