GSAP staggerTo方法偏移值（Offset）计算器

GSAP staggerTo Offset Calculator

gsap, tool

《aframe.js 3d拼图代码详解》作品已被踏得网收录！

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

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

body {
    width: 100%;
    height: 100%;
    font-family: Arial, Helvetica, sans-serif;
    background-color: #212121;
    color: #ededed;
    text-align: center;
    overflow-x: hidden;
}
input {
    padding: 10px 0 10px 10px;
    margin: 5px;
    border-radius: 3px;
    border: none;
    text-align: left;
    width: 100%;
    font-size: 18px;
    box-sizing: border-box;
    background: #ededed;
}
input:focus {
    box-shadow: 0 0 0 3pt #88CE02;
}
#result {} button {
    display: block;
    width: 100%;
    padding: 14px;
    margin: 30px 5px 30px 5px;
    ;
    font-size: 18px;
    line-height: 18px;
    font-weight: 700;
    letter-spacing: 1px;
    color: #212121;
    border-radius: 6px;
    border: none;
    box-shadow: 0 2px 0 #517B01;
    cursor: pointer;
    background-color: #88CE02;
    text-align: center;
    box-sizing: border-box;
}
button:focus {
    /* outline: #ededed solid thick; */
    
    outline: 0;
    box-shadow: 0 0 0 3pt #ededed;
}
#result {
    box-sizing: border-box;
    border: 1px solid white;
    width: 100%;
    background: #ededed;
    /* border: 2px solid rgba(237,237,237,0.1); */
    
    font-size: 21px;
    border-radius: 0px;
    line-height: 26px;
    padding: 18px;
    margin: 30px 5px 30px 5px;
    ;
    color: #212121;
    text-align: center;
}
section {
    width: 400px;
    display: inline-block;
    text-align: center;
}
p {
    margin: 20px 0 5px 0;
    padding: 0 0 0 6px;
    ;
    text-align: left;
}
svg {
    padding: 20px 0 20px 0;
    margin: 0;
    width: 100%;
}
h1 {
    padding: 0 0 20px 0;
    font-size: 26px
}

HTML

<section>
    <svg xmlns="https://www.w3.org/2000/svg" viewBox="0 0 250 105.5">
        <title>staggerDemo</title>
        <g id="Layer_2" data-name="Layer 2">
            <g id="Layer_1-2" data-name="Layer 1">
                <g>
                    <rect y="20" width="100" height="10" rx="5" ry="5" fill="#88ce02" />
                    <rect x="10" y="31" width="100" height="10" rx="5" ry="5" fill="#88ce02" />
                    <rect x="20" y="42" width="100" height="10" rx="5" ry="5" fill="#88ce02" />
                    <rect x="30" y="53" width="100" height="10" rx="5" ry="5" fill="#88ce02" />
                    <rect x="40" y="64" width="100" height="10" rx="5" ry="5" fill="#88ce02" />
                    <rect x="50" y="75" width="100" height="10" rx="5" ry="5" fill="#88ce02" />
                </g>
                <g>
                    <rect x="100" y="20" width="100" height="10" rx="5" ry="5" fill="#0071bc" />
                    <rect x="110" y="31" width="100" height="10" rx="5" ry="5" fill="#0071bc" />
                    <rect x="120" y="42" width="100" height="10" rx="5" ry="5" fill="#0071bc" />
                    <rect x="130" y="53" width="100" height="10" rx="5" ry="5" fill="#0071bc" />
                    <rect x="140" y="64" width="100" height="10" rx="5" ry="5" fill="#0071bc" />
                    <rect x="150" y="75" width="100" height="10" rx="5" ry="5" fill="#0071bc" />
                </g>
                <g>
                    <rect x="100" width="50" height="105" fill="#fff" opacity="0.23" />
                    <g>
                        <line x1="100" y1="1.4" x2="100" y2="2.9" fill="none" stroke="#fff" stroke-linecap="round" stroke-miterlimit="10" />
                        <line x1="100" y1="5.95" x2="100" y2="101.98" fill="none" stroke="#fff" stroke-linecap="round" stroke-miterlimit="10" stroke-dasharray="3.05 3.05" />
                        <line x1="100" y1="103.5" x2="100" y2="105" fill="none" stroke="#fff" stroke-linecap="round" stroke-miterlimit="10" />
                    </g>
                    <g>
                        <line x1="150" y1="1.4" x2="150" y2="2.9" fill="none" stroke="#fff" stroke-linecap="round" stroke-miterlimit="10" />
                        <line x1="150" y1="5.95" x2="150" y2="101.98" fill="none" stroke="#fff" stroke-linecap="round" stroke-miterlimit="10" stroke-dasharray="3.05 3.05" />
                        <line x1="150" y1="103.5" x2="150" y2="105" fill="none" stroke="#fff" stroke-linecap="round" stroke-miterlimit="10" />
                    </g>
                </g>
                <g>
                    <polygon points="102.44 9.36 108 12.57 108 6.15 102.44 9.36" fill="#fff" />
                    <rect x="108" y="9" width="34" height="1" fill="#fff" />
                    <polygon points="147.85 9.36 142.29 6.15 142.29 12.57 147.85 9.36" fill="#fff" />
                </g>
            </g>
        </g>
    </svg>

<h1>Calculate a GSAP stagger offset</h1>
    <p>Number of elements</p>
    <input id="num" type="text" placeholder="Num elements" />
    <p>Duration of tween</p>
    <input id="duration" type="text" placeholder="Duration" />
    <p>Stagger</p>
    <input id="offset" type="text" placeholder="Stagger" />
    <button id="calc" value="calculate">CALCULATE</button>
    <p id="result" type="text" placeholder="result">RESULT</p>
</section>

GSAP staggerTo Offset Calculator

gsap, tool

编辑器支持Emmet

快捷键

GSAP staggerTo Offset Calculator

gsap, tool

Three.js + GSAP很棒的图像朦胧模糊化（光束）特效

TweenMax + Prostyle.js 文本特效 - 雾化（模糊化）

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：