使用GSAP实现很棒的面部跟踪鼠标动画

Face Follower 面部朝向和眼睛能感知鼠标位置，随之发生变化。并能自动切换多种表情。是HTML5表情帝作品：）

gsap, face

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

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

HTML
CSS
JavaScript
Result

编译

JavaScript

TweenMax.set('svg', {
    visibility: 'visible',
    xPercent: -50,
    left: '50%'
})

var tl = new TimelineMax();
tl.to(frontCircle, 1, {

})

select('body').onmousemove = function(e) {
    var rad = Math.atan2(e.offsetY - 300, e.offsetX - 400);
    var deg = Math.round(rad * (180 / Math.PI));
    mousePos.x = ((800 / 2) - e.offsetX) * -1;
    mousePos.y = ((600 / 2) - e.offsetY) * -1;
    // console.log(deg)

if (e.pageX - select('.mainSVG').getBoundingClientRect().left < 0) {

return;
    }
    TweenMax.to([frontCircle, ], 0.3, {
        shortRotation: 180 + deg,
        svgOrigin: '400 300'
    })

var xPos = (mousePos.x / 15 <= facePosXMax) ? mousePos.x / 15 : facePosXMax;

//console.log(e.pageX - select('.mainSVG').getBoundingClientRect().left);
    TweenMax.to(faceGroup, 0.5, {
        x: xPos,
        y: (mousePos.y / 12 <= facePosYMax) ? mousePos.y / 12 : facePosYMax,
    })

// console.log(mousePos.x)
}

function blink() {

TweenMax.to(eyeGroup, 0.05, {
        scaleY: 0.1,
        transformOrigin: '50% 50%',
        repeat: 1,
        yoyo: true,
        onComplete: blink,
        delay: Math.random() * 10
    })

}

function goOoh() {

mouthTween.to('#mouth', 0.001, {
        alpha: 0
    })
    mouthTween.to('#mouthOoh', 0.001, {
            alpha: 1
        })
        /*   mouthTween.to('#eyeGroup circle',0.001, {
            attr:{
              cy:'-=6'
            }
          })
            */
    TweenMax.delayedCall(Math.random() * 10, function() {
        mouthTween.reversed(!mouthTween.reversed());
        goOoh();
    })

}

blink();
goOoh()

编译

CSS

HTML

</clipPath>
    </defs>
    <rect width="100%" height="100%" fill="#FFF" />
    <use xlink:href="#backCircle" />

Face Follower 面部朝向和眼睛能感知鼠标位置，随之发生变化。并能自动切换多种表情。是HTML5表情帝作品：）

gsap, face

编辑器支持Emmet

快捷键

Face Follower 面部朝向和眼睛能感知鼠标位置，随之发生变化。并能自动切换多种表情。是HTML5表情帝作品：）

gsap, face

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

使用GSAP实现的3D走马灯品牌图文展示动画

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：