HTML5 GSAP 做引体向上体育运动的小O同学

很有趣的一个拟人化体操运动动画作品。

html5, sport

《three.js使用多个渐变torus模拟光环光晕》申请公开！

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

HTML
CSS
JavaScript
Result

编译

JavaScript

var xmlns = "http://www.w3.org/2000/svg",
    xlinkns = "http://www.w3.org/1999/xlink",
    select = function(s) {
        return document.querySelector(s);
    },
    selectAll = function(s) {
        return document.querySelectorAll(s);
    },
    OGroup = select('.OGroup'),
    bigO = select('.bigO'),
    OArmLDown = select('.OArmLDown'),
    OArmRDown = select('.OArmRDown'),
    OLegL = select('.OLegL'),
    OLegR = select('.OLegR'),
    OArmLUpArr = "358.5 170.54 324 167.5 340 128.5".split(' ').map(Number),
    OArmRUpArr = "460 170.5 498.5 164.5 486 128.5".split(' ').map(Number),
    OArmLDownArr = OArmLDown.getAttribute('points').split(' ').map(Number),
    OArmRDownArr = OArmRDown.getAttribute('points').split(' ').map(Number),
    OArmLTempArr = OArmLDownArr.slice(0),
    OArmRTempArr = OArmRDownArr.slice(0)

/* CustomEase.create("shake", "M0,0 C0.48,0.182 0.451,0.951 0.5,1 0.528,1.028 0.554,0.968 0.57,0.968 0.586,0.968 0.606,1.028 0.626,1.028 0.654,1.028 0.634,0.97 0.664,0.97 0.692,0.97 0.679,1.022 0.708,1.024 0.728,1.024 0.719,0.96 0.736,0.972 0.74,0.974 0.753,1.022 0.79,1.026 0.805,1.027 0.822,0.979 0.839,0.978 0.86,0.986 0.869,1.02 0.896,1.024 0.912,1.026 0.931,0.98 0.948,0.976 0.976,0.968 0.999,1 1,1") */

TweenMax.set('svg', {
    visibility: 'visible'
})
var mainTl = new TimelineMax()

var tl = new TimelineMax({
    repeat: -1,
    repeatDelay: 3,
    onUpdate: onUpdate
}).timeScale(3);
tl.to(OArmLTempArr, 4, {
        endArray: OArmLUpArr,
        ease: Back.easeOut.config(1.5)
    })
    .to(OArmRTempArr, 4, {
        endArray: OArmRUpArr,
        ease: Back.easeOut.config(1.5)
    }, '-=4')
    .to(bigO, 4, {
        y: '-=30',
        ease: Back.easeOut.config(1.5)
    }, '-=4')
    .staggerTo([OLegL, OLegR], 4, {
        // scaleY:1.2,
        y: -30,
        cycle: {
            rotation: [-6, 6],
            transformOrigin: ['100% 0%', '0% 0%']
        },

ease: Back.easeOut.config(1.5)
    }, 0, '-=4')
    .to('#oBg', 4, {
        attr: {
            x: -7,
            y: 16
        },
        ease: Back.easeOut.config(1.5)
    }, '-=4')
    .to(OGroup, 0.13, {
        y: -2,
        repeat: 40,
        yoyo: true,
        ease: Linear.easeNone
    }, '-=2.3')
    .to(bigO, 1, {
        y: 0,
        ease: Back.easeOut.config(1.5)
    }, '+=0')
    .to(OArmLTempArr, 1, {
        endArray: OArmLDownArr,
        ease: Back.easeOut.config(1.5)
    }, '-=1')
    .to(OArmRTempArr, 1, {
        endArray: OArmRDownArr,
        ease: Back.easeOut.config(1.5)
    }, '-=1')
    .to('#oBg', 1, {
        attr: {
            x: 8,
            y: 0
        },
        ease: Back.easeOut.config(1.5)
    }, '-=1')
    .staggerTo([OLegL, OLegR], 1, {
        y: 0,
        ease: Back.easeOut.config(1.5)
    }, 0, '-=1')
    .staggerTo([OLegL, OLegR], 4, {
        rotation: 0,
        cycle: {
            duration: [4, 7]
        },
        ease: Elastic.easeOut.config(2, .75)
    }, 0, '-=1')

var patternTl = new TimelineMax({
    repeat: -1,
    yoyo: true
})
patternTl.staggerTo('#oBg *', 0.4, {
    cycle: {
        fillOpacity: [1, 0]
    },
    ease: Linear.easeNone
}, 0)

//patternTl.duration(tl.duration());

mainTl.add(tl, 0);
mainTl.add(patternTl, 0)

function onUpdate() {
    OArmLDown.setAttribute('points', OArmLTempArr);
    OArmRDown.setAttribute('points', OArmRTempArr);
    //legR.setAttribute('points', legRDownArr);

}

//ScrubGSAPTimeline(tl);

编译

CSS

HTML

</pattern>

</defs>
    <clipPath id="oMask">
        <path class="bigO" id="bigO" d="M354.54,248.49q0-26.89,2.52-43t7.9-24.2q7.35-11.53,17.55-16.47t26.87-4.94q16.67,0,26.87,4.94t17.66,16.47q5.37,8.34,7.84,24.37t2.47,42.81q0,26.67-2.52,42.75t-7.78,24.42q-7.46,11.53-17.66,16.46t-26.87,4.94q-16.67,0-26.87-4.94T365,315.67q-5.37-8.12-7.9-24.2T354.54,248.49Zm32.16,0q0,41.71,4.87,52.52t18,10.81q12.92,0,17.68-10.59T432,248.49q0-42.15-4.82-52.91t-17.85-10.76q-13,0-17.85,10.76T386.7,248.49Z"
        />
    </clipPath>
    <g class="OGroup">

</svg>

很有趣的一个拟人化体操运动动画作品。

html5, sport

编辑器支持Emmet

快捷键

很有趣的一个拟人化体操运动动画作品。

html5, sport

HTML5 GSAP一款很棒的竖向动画广告条模板

HTML5 GSAP移动应用中点击按钮液体弥漫全屏的交互动画

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：