如何使用GSAP框架触发一个动画

本例演示在页面滚动到特点位置时，触发一个简单的动画。

GSAP

《three.js如何实现贴图模糊效果 - 使用canvas》申请公开！

第三方库
作品简介 1248
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

Full Tutorial: http://scotch.io/tutorials/building-
interactive-scrolling-websites-with-scrollmagic-js

CodePen Collection: http://codepen.io/collection/XmearX/

/* Ignore => Base Styles */

body {
    background: #e3e3e3;
    -webkit-font-smoothing: antialiased;
}
.ScrollSceneIndicators {
    z-index: 9999999 !important;
}
/* Ignore => Useless Header Styles */

header {
    text-align: center;
    background: rgb(0, 164, 213);
    padding: 50px 0 125px;
    color: #fff;
    position: relative;
}
header * {
    text-shadow: 0px 1px 1px rgba(150, 150, 150, 0.35);
}
header h1 {
    margin-top: 0;
    font-size: 50px;
}
header h1 i.fa-heart {
    color: rgb(221, 75, 80);
}
header h1 i.fa-magic {
    color: rgb(39, 97, 223);
}
header hr {
    max-width: 80px;
    border-top: solid 2px #fff;
}
header h2 {
    margin-bottom: 30px;
}
header p {
    margin-bottom: 0px;
}
header i.fa-angle-double-down {
    font-size: 50px;
    position: absolute;
    bottom: 10px;
    left: 50%;
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -o-transform: translateX(-50%);
    transform: translateX(-50%);
    color: #111;
}
header i.fa-angle-double-down:after {
    content: 'Start Scrolling Down';
    position: absolute;
    bottom: 100%;
    left: -35px;
    font-size: 15px;
    width: 104px;
}
/* Create huge scrolling area (imitates height of a page) */

main {
    padding: 200px 0 1500px 0;
    overflow: hidden;
}
/* Styles for wrap for demo */

.wrap {
    text-align: center;
    background: #fff;
    padding: 50px 0;
    -moz-box-shadow: 0 0 6px rgba(153, 153, 153, 0.25);
    -webkit-box-shadow: 0 0 6px rgba(153, 153, 153, 0.25);
    box-shadow: 0 0 6px rgba(153, 153, 153, 0.25);
    position: relative;
}
/* Default Animation Styles */

#animation {
    background: #000;
    width: 100px;
    height: 100px;
    border-radius: 100%;
    margin: 50px auto;
    position: relative;
}
#animation i {
    color: #fff;
    position: absolute;
    left: 50%;
    top: 50%;
    font-size: 30px;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

HTML

<header>
    <div class="container">
        <div class="col-md-8 col-md-offset-2">
            <h1>
        <i class="fa fa-heart"></i>
        ScrollMagic Demos
        <i class="fa fa-magic"></i>
      </h1>
            <hr>
            <h2>Animation Trigger</h2>
            <p class="lead">This example shows how to trigger a basic animation when you hit a certain point using the GreenSock Animation Platform.</p>
        </div>
    </div>
    <i class="fa fa-angle-double-down"></i>
</header>
<main>
    <div class="container">
        <div class="row">
            
            <div class="col-md-6 col-md-offset-3">
                <div class="wrap" id="scene">
                    <h2>Magic Happens Here</h2>
                    <div id="animation"><i class="fa fa-heart"></i>
                    </div>
                </div>
            </div>
        </div>
    </div>
</main>

本例演示在页面滚动到特点位置时，触发一个简单的动画。

GSAP

编辑器支持Emmet

快捷键

本例演示在页面滚动到特点位置时，触发一个简单的动画。

GSAP

一款使用GSAP实现的移动幻灯片页面模板

GSAP 字母一个个从下面飞上来的文本动画

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：