GSAP动画示例

gsap示例

实现多屏幕，当某个屏幕中动画元素出现在视窗时候, 屏幕固定，开始动画。

scrub: true 表示滚动时动画同步
pin: true 表示动画时候,.ball-wrapper 改成 fixed
markers: true 表示显示标记

html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <section></section>
    <section class="ball-wrapper">
        <div class="ball"></div>
    </section>
    <section></section>
</body>

</html>
<!-- GSAP -->
<script src="https://unpkg.com/gsap/dist/gsap.min.js"></script>
<script src="https://unpkg.com/gsap/dist/ScrollTrigger.min.js"></script>
<script>
    gsap.registerPlugin(ScrollTrigger);

    // 动画对象是.ball 元素，触发动画对象是 .ball-wrapper滚动到 top
    // scrub: true 表示滚动时动画同步
    // markers: true 表示显示标记
    // pin: true 表示动画时候,.ball-wrapper 改成 fixed
    gsap.to('.ball', {
        x: 900,
        rotation: 360,
        scale: 1.5,
        backgroundColor: "red",
        borderRadius: 150,
        scrollTrigger: {
            trigger: '.ball-wrapper',
            pin: true,
            scrub: true,
            markers: true,
        }
    });
</script>
<style>
    body {
        padding: 0;
        margin: 0;
    }

    .ball {
        width: 250px;
        height: 250px;
        background: #292424;
    }

    section {
        width: 100vw;
        height: 100vh;
        display: flex;
        align-items: center;
        /* justify-content: center; */
        font-size: 40px;
        font-weight: bold;
        border: 1px solid red;
    }

    section:nth-child(1) {
        background: #d8d8d8;
    }

    section:nth-child(2) {
        background: #adaeaf;
    }

    section:nth-child(3) {
        background: #595c5b;
    }
</style>

返回博客列表

最后更新于 2026-01-29

想法或问题？在 GitHub Issue 下方参与讨论

去评论