gsap player

？ GSAP 播放器？

一个小型的、可定制的类似 YouTube 的 GSAP (GreenSock) 时间线播放器

项目演示页面：http://s.codepen.io/sdras/debug/Mpjxxq/

用法

最简单的可能用法是在结束 body 标记之前加载 gsap-player.js （您不需要 CSS 文件）并实现：

 gsapPlayer ( { playerTL : yourtimelinehere } ) ;

这会将播放器附加到 document.body 中。默认的时间轴名称是tl ，如果你使用 tl ，你只需要调用gsapPlayer();

配置

浅色主题

GSAP Player 将默认为深色主题，但您也可以配置浅色主题：

 gsapPlayer ( { light : true } ) ;

位置

默认情况下，GSAP 播放器的宽度为 80%，距离视口底部为 40 像素。您可以将其配置为全宽或与底部齐平，或者稍高或略低。底部必须是字符串。

 gsapPlayer ( {
  fullWidth : true ,
  bottom : '0'
} ) ;

如果您使用全角并将容器默认为 document.body，则应确保由于奇怪的浏览器默认设置而在正文上使用了重置或放置了margin: 0 。

容器

默认情况下，玩家在主体上实例化，但如果您想更改父级，您可以执行以下操作：

 gsapPlayer ( { container : '#foo' } ) ;

您需要在该包含元素上放置position:relative，以将玩家空间包围在该div中。请注意：这不会将动画也放入容器中（为了灵活性，配置是分开的。

执照

（麻省理工学院许可证）

版权所有 (c)2017 Sarah Drasner @sarah_edo 保留所有权利。

特此免费授予获得本软件和相关文档文件（“软件”）副本的任何人不受限制地使用本软件，包括但不限于使用、复制、修改、合并的权利、发布、分发、再许可和/或销售软件的副本，并允许向其提供软件的人员这样做，但须满足以下条件：

上述版权声明和本许可声明应包含在本软件的所有副本或主要部分中。

本软件按“原样”提供，不提供任何明示或暗示的保证，包括但不限于适销性、特定用途的适用性和不侵权的保证。在任何情况下，作者或版权持有者均不对因本软件或本软件中的使用或其他交易而产生或与之相关的任何索赔、损害或其他责任负责，无论是合同、侵权行为还是其他行为。软件。