14.10.2019 2 580 Codepen

Свинья-копилка

Анимация svg свиньи копилки с помощью GSAP tweenmax

HTML

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 800 600" xml:space="preserve">
<defs>
    <clipPath id="eyeRMask">
        <circle cx="369.269" cy="266.637" r="5.756"/>
    </clipPath>
    <clipPath id="eyeLMask">
        <circle cx="339.74" cy="266.637" r="5.756"/>
    </clipPath>
    <clipPath id="coinClip">
        <path d="M412.562,267.811l0.52-0.155l0.344-0.128l0.498-0.176c7.601-2.606,15.621-3.001,23.166-1.348l1.354,0.309
    c0.329,0.106,0.732,0.177,1.07,0.176c1.511-0.004,2.879-0.604,3.758-1.741c0.727-0.941,8.376-172.079,7.981-173.201
    c-0.389-1.107-14.408-2.47-17.013-3.054l-4.98-0.831c-6.506-1.203-13.2-0.931-19.587,0.798l-0.222,0.048
    c-1.857,0.402-3.68,0.953-5.448,1.648v0c-1.782,0.528-10.335,2.261-10.364,4.243l13.618,169.882
    c-0.009,0.156,0.002,0.318,0.036,0.471C407.898,267.432,410.348,268.179,412.562,267.811z"/>
    </clipPath>
</defs>
<path id="tail" fill="none" stroke="#EF8AA4" stroke-width="4" stroke-linecap="round" stroke-miterlimit="10" d="M474.464,309.97
    c0,0,19.48-2.868,15.756-11.668c-1.114-2.631-5.614-3.262-7.091-0.815c-3.504,5.804,6.384,10.123,6.384,10.123
    s12.999,6.304,10.7-15.708"/> 
<path id="tail2" fill="none" display="none" stroke="#EF8AA4" stroke-width="4" stroke-linecap="round" stroke-miterlimit="10" d="M474.822,309.308
    c0,0,13.611-1.531,36.028-3.945"/>
<ellipse id="shadow" opacity="0.25" fill="#AFAFAF" cx="413.866" cy="372.905" rx="67.45" ry="11.75"/>
<path id="backFootL" fill="#D999AD" d="M459.198,374.186L459.198,374.186c-4.825,0-8.737-3.912-8.737-8.737v-31.696h17.474v31.696
    C467.935,370.275,464.023,374.186,459.198,374.186z"/>
<path id="frontFootR" fill="#C18A9D" d="M371.191,374.179L371.191,374.179c-4.825,0-8.737-3.912-8.737-8.737v-33.013h17.474v33.013
    C379.928,370.267,376.017,374.179,371.191,374.179z"/>
<path id="backFootR" fill="#C18A9D" d="M437.223,374.111L437.223,374.111c-4.826,0-8.738-4.401-8.737-9.832
    c0.001-11.815,0.001-30.07,0.001-30.07h17.474v30.07C445.96,369.709,442.048,374.111,437.223,374.111z"/>
<path id="frontFootL" fill="#D999AD" d="M392.87,378.137L392.87,378.137c-4.825,0-8.737-3.912-8.737-8.737v-33.889h17.474V369.4
    C401.606,374.225,397.695,378.137,392.87,378.137z"/>
<ellipse id="bodyF" fill="#D999AD" cx="383.481" cy="319.313" rx="35.78" ry="35.78"/>
<g id="bodyB">
<ellipse fill="#EEA8BE" cx="427.281" cy="305.966" rx="52.19" ry="52.19"/>
<path id="bodyShadow" fill="#D999AD" d="M384.584,317.032c0,0,13.517,30.468,46.894,28.73c0,0,28.995,1.127,47.753-34.762
c0,0-3.012,43.926-48.875,47.408c0,0-42.039,2.485-53.562-37.989"/>
</g>
<g id="shadowGroup">
    <path id="headShadow" fill="#D999AD" d="M347.754,320.789l0.202,2.631c0,0,10.313,4.671,26.826-0.581
    c16.378-5.208,30.811-18.813,29.923-35.616c-0.091-1.717-0.842-4.091-0.842-4.091c-0.78,5.638-1.257,11.667-3.864,16.041
    c-7.05,11.827-13.8,17.628-25.373,21.662C354.804,327.745,347.754,320.789,347.754,320.789"/>
</g>
<g id="headGroup">
    <g id="ears">
        <g id="earL">
        <path fill="#EEA8BE" d="M330.875,254.503c-0.899-0.053-2.843-0.798-5.936-5.128c-4.448-6.227,3.41-13.789,3.41-13.789
            s3.114-3.262,4.003-6.969c0.89-3.707,3.707-5.19,3.707-5.19s4.893,2.372,4.596,6.079c0,0,8.896,3.045,10.305,9.752
            c0,0,0.065,0.812-0.303,2.09C349.588,242.787,330.141,256.096,330.875,254.503z"/>
        <path fill="#EF8AA4" d="M335.038,227.051c0,0-3.41,9.638-6.227,12.01c-2.817,2.372,3.114,11.952,3.114,11.952
            s13.344-4.835,14.531-10.617c1.186-5.783-6.82-8.6-6.82-8.6S338.3,228.385,335.038,227.051z"/>
        </g>
        <g id="earR">
        <path fill="#EEA8BE" d="M393.717,259.129c0.888,0.151,2.95-0.139,6.936-3.664c5.733-5.07-0.227-14.203-0.227-14.203
            s-2.302-3.878-2.336-7.69s-2.447-5.889-2.447-5.889s-5.301,1.213-5.844,4.892c0,0-9.353,0.97-12.231,7.189
            c0,0-0.246,0.777-0.174,2.105C378.112,243.511,394.075,260.847,393.717,259.129z"/>
        <path fill="#EF8AA4" d="M395.824,231.443c0,0,1.159,10.157,3.372,13.102s-5.718,10.948-5.718,10.948s-11.918-7.708-11.776-13.609
            s8.577-6.849,8.577-6.849S392.346,232.011,395.824,231.443z"/>
        </g>
    </g>
    <circle id="head" fill="#EEA8BE" cx="361.269" cy="279.491" r="43.437"/>
    <path id="mouth2" display="none" fill="#FFFFFF" d="M361.395,295.891c0,0,2.585-0.109,4.067,2.727
    c1.437,2.749-1.349,4.365-1.349,4.365c-4.779,1.812-13.739-4.302-13.739-4.302L361.395,295.891z"/>
    <circle id="mouth" fill="#FFFFFF" cx="354.077" cy="300.206" r="5.605"/>
    <g id="noseGroup">
        <ellipse id="nose" fill="#EF8AA4" cx="354.077" cy="290.492" rx="13.155" ry="9.366"/>
        <ellipse class="nostril" fill="#B16F86" cx="358.285" cy="290.308" rx="2.543" ry="3.122"/>
        <ellipse class="nostril" fill="#B16F86" cx="347.627" cy="290.345" rx="2.543" ry="3.122"/>
    </g>
    <g id="eyes">
        <g id="eyeR">
            <circle  id="eyeWR" fill="#FFFFFF" cx="369.269" cy="266.637" r="5.756"/>
            <g clip-path="url(#eyeRMask">
                <circle  fill="#1D1D1B" cx="369.269" cy="267.305" r="1.689"/>
            </g>
        </g>
        <g id="eyeL">
            <circle id="eyeWL" fill="#FFFFFF" cx="339.74" cy="266.637" r="5.756"/>
            <g clip-path="url(#eyeLMask)">
                <circle fill="#1D1D1B" cx="339.74" cy="267.305" r="1.689"/>
            </g>    
        </g>
    </g>
</g>
<g id="eyeSquint">
    <polyline fill="none" stroke="#EF8AA4" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" points="
    371.875,271.21 367.915,268.923 363.955,266.637 367.915,264.351 371.875,262.065"/>
    <polyline fill="none" stroke="#EF8AA4" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" points="
    336.962,262.065 340.922,264.351 344.882,266.637 340.922,268.923 336.962,271.21"/>
</g>
<path id="hole" fill="#B16F86" d="M412.562,267.811l0.52-0.155l0.344-0.128l0.498-0.176c7.601-2.606,15.621-3.001,23.166-1.348
    l1.354,0.309c0.329,0.106,0.732,0.177,1.07,0.176c1.511-0.004,2.879-0.604,3.758-1.741c0.727-0.941,0.992-2.197,0.598-3.319
    c-0.389-1.107-1.408-2.47-4.012-3.054l-3.98-0.831c-6.506-1.203-13.2-0.931-19.587,0.798l-0.222,0.048
    c-1.858,0.402-3.68,0.953-5.448,1.648l0,0c-1.782,0.528-3.334,2.26-3.363,4.243l0,0c-0.009,0.156,0.002,0.318,0.036,0.471
    C407.898,267.432,410.348,268.179,412.562,267.811z"/>
<g id="coinLines">
    <line class="lineUp" fill="none" stroke="#EFC75E" stroke-width="2" stroke-linecap="round" stroke-miterlimit="10" x1="422.692" y1="245.76" x2="422.692" y2="231.443"/>
    <line class="lineUp" fill="none" stroke="#EFC75E" stroke-width="2" stroke-linecap="round" stroke-miterlimit="10" x1="428.692" y1="245.76" x2="428.692" y2="231.443"/>
    <line class="lineDown" fill="none" stroke="#EFC75E" stroke-width="2" stroke-linecap="round" stroke-miterlimit="10" x1="428.692" y1="168.439" x2="428.692" y2="182.756"/>
    <line class="lineDown" fill="none" stroke="#EFC75E" stroke-width="2" stroke-linecap="round" stroke-miterlimit="10" x1="422.692" y1="168.439" x2="422.692" y2="182.756"/>
</g>
<g clip-path="url(#coinClip)">
<g id="coin">
    <circle fill="#EFC75E" cx="425.692" cy="282.513" r="16.496"/>
    <circle fill="none" stroke="#CC9933" stroke-miterlimit="10" cx="425.692" cy="282.513" r="14.764"/>
    <path fill="none" stroke="#CC9933" stroke-miterlimit="10" d="M419.438,278.638c-0.131-0.135-0.28-0.313-0.447-0.548
        c-0.818-1.154,0.639-2.547,0.639-2.547s0.578-0.601,0.744-1.286c0.167-0.685,0.689-0.957,0.689-0.957s0.903,0.442,0.846,1.127
        c0,0,1.344,0.465,1.79,1.472"/>
    <path fill="none" stroke="#CC9933" stroke-miterlimit="10" d="M432.593,279.578c0.118-0.085,0.248-0.188,0.391-0.315
        c1.063-0.934-0.033-2.626-0.033-2.626s-0.423-0.718-0.427-1.423s-0.449-1.09-0.449-1.09s-0.981,0.221-1.083,0.901
        c0,0-1.73,0.173-2.266,1.321"/>
    <path fill="none" stroke="#CC9933" stroke-miterlimit="10" d="M433.718,283.708c-0.015,4.435-3.623,8.018-8.057,8.003
        c-4.435-0.015-8.018-3.623-8.003-8.057c0.006-1.9,0.672-3.644,1.78-5.015c1.478-1.829,3.742-2.996,6.277-2.987
        C430.15,275.665,433.733,279.273,433.718,283.708z"/>
    <circle fill="none" stroke="#CC9933" stroke-width="0.9276" stroke-miterlimit="10" cx="425.669" cy="289.288" r="1.036"/>
        <ellipse transform="matrix(0.0034 -1 1 0.0034 138.5199 710.4203)" fill="none" stroke="#CC9933" stroke-miterlimit="10" cx="425.681" cy="285.714" rx="1.731" ry="2.432"/>
        <ellipse transform="matrix(0.0034 -1 1 0.0034 139.5325 711.3751)" fill="#CC9933" cx="426.667" cy="285.683" rx="0.577" ry="0.47"/>
        <ellipse transform="matrix(0.0034 -1 1 0.0034 137.5687 709.4048)" fill="#CC9933" cx="424.696" cy="285.684" rx="0.577" ry="0.47"/>
    <circle fill="none" stroke="#CC9933" stroke-miterlimit="10" cx="428.426" cy="281.313" r="1.064"/>
    <circle fill="none" stroke="#CC9933" stroke-miterlimit="10" cx="422.967" cy="281.295" r="1.064"/>
</g>
</g>
<g id="tearGroup">
    <circle id="tearL" fill="#6D8FFE" cx="330" cy="262.801" r="2"/>
    <circle id="tearL" fill="#6D8FFE" cx="330" cy="262.801" r="2"/>
    <circle id="tearL" fill="#6D8FFE" cx="330" cy="262.801" r="2"/>
    <circle id="tearL" fill="#6D8FFE" cx="330" cy="262.801" r="2"/>
    <circle id="tearL" fill="#6D8FFE" cx="330" cy="262.801" r="2"/>
    <circle id="tearR" fill="#6D8FFE" cx="383.796" cy="271.801" r="2"/>
    <circle id="tearR" fill="#6D8FFE" cx="383.796" cy="271.801" r="2"/>
    <circle id="tearR" fill="#6D8FFE" cx="383.796" cy="271.801" r="2"/>
    <circle id="tearR" fill="#6D8FFE" cx="383.796" cy="271.801" r="2"/>
    <circle id="tearR" fill="#6D8FFE" cx="383.796" cy="271.801" r="2"/>
</g>
<g id="arrow">
    <polyline fill="none" stroke="#EFC75E" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" points="
    540.584,302.269 537.344,299.677 534.104,297.086 537.344,294.494 540.584,291.902"/>
    <polyline fill="none" stroke="#EFC75E" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" points="
    534.104,302.269 530.864,299.677 527.625,297.086 530.864,294.494 534.104,291.902"/>
    <polyline fill="none" stroke="#EFC75E" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" points="
    527.625,302.269 524.385,299.677 521.145,297.086 524.385,294.494 527.625,291.902"/>
</g> 
</svg>

CSS

html,
body {
  height: 100%;
}
body {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  overflow: hidden;
}
svg {
  width: 100%;
  visibility: hidden;
}

JS

Дополнительные библиотеки:

https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/TweenMax.min.js
https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/MorphSVGPlugin.min.js
https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/DrawSVGPlugin.min.js
https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/Physics2DPlugin.min.js
https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/CustomEase.min.js
https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/ThrowPropsPlugin.min.js
https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/utils/Draggable.min.js

скрипт

const randomMinMax = (min,max) => {
    return min + Math.random()* (max-min);
}

TweenMax.set('#arrow',{x:-10,y:4})
TweenMax.set('#arrow polyline',{alpha:0})

const coinEase = CustomEase.create("custom", "M0,0 C0.128,0.572 0.16,1.048 0.542,1.048 0.928,1.048 1,0 1,0");
const jiggleEase = CustomEase.create("custom", "M0,0 C0,0.704 0.3,1 0.5,1 0.704,1 1,0.704 1,0");
const nostrilEase = CustomEase.create("custom",'M0,0 C0.126,0.382 0.166,1 0.328,1 0.568,1 0.448,0 0.654,0 0.792,0 0.7,0.502 0.86,0.502 0.974,0.502 1,0 1,0');

const particleL = document.querySelectorAll('#tearL');
const particleR = document.querySelectorAll('#tearR');

TweenMax.set('svg',{visibility:"visible"});
TweenMax.set('#hole',{scale:0,transformOrigin:"center center"});
TweenMax.set('.lineUp',{drawSVG:"0% 0%",y:-4,scaleY:1.5});
TweenMax.set('.lineDown',{drawSVG:"0% 0%", y:-4,scaleY:1.5});
TweenMax.set('#eyeSquint',{opacity:0,y:2,scale:1.1});
TweenMax.set(particleL,{alpha:0});
TweenMax.set(particleR,{alpha:0});

MorphSVGPlugin.convertToPath('#mouth');

const particleLTl = new TimelineMax({repeat:-1,paused:true});
const particleRTl = new TimelineMax({repeat:-1,paused:true});

for (let i = 0; i < particleL.length;i++) {
    particleLTl.staggerFromTo(particleL,0.4,{
        scaleY:randomMinMax(0.5,1),
        scaleX:randomMinMax(0.5,1),
        alpha: randomMinMax(0.5,1),
        immediateRender:false,
        x:0,
        y:0
    },{
        cycle: {
            physics2D: () => {
                return {
                    velocity:randomMinMax(30,50),
                    angle:randomMinMax(-180,-110),
                    gravity:randomMinMax(600,800)
                }   
            }
        },
        scale: 0,
        alpha: 1,
        ease:Linear.easeNone
    },0.15)

    particleRTl.staggerFromTo(particleR,0.4,{
        scaleY:randomMinMax(0.5,1),
        scaleX:randomMinMax(0.5,1),
        alpha:randomMinMax(0.5,1),
        immediateRender:false,
        x:0,
        y:0
    },{
        cycle: {
            physics2D: () => {
                return {
                    velocity:randomMinMax(30,60),
                    angle:randomMinMax(90,30),
                    gravity:randomMinMax(600,800)
                }   
            }
        },
        scale: 0,
        alpha: 1,
        ease:Linear.easeNone 
    },0.15)
}
   
const squealTl = new TimelineMax({repeat:-1,paused:true});
squealTl.to('#tail',1,{morphSVG:"#tail2"},'in')
    .to('#eyes',1,{scale:1.15,transformOrigin:"center center",rotation:10,x:2},'in')
    .to('#eyeR',1,{scale:1.4,transformOrigin:"center center"},'in')
    .to('#eyeL',1,{scale:1.3,transformOrigin:"center center"},'in')
    .to('#head',1,{scale:1.05,transformOrigin:"center center"},'in')
    .to('#noseGroup',1,{y:-5,rotation:8},'in')
    .to('#earR',1,{rotation:12,x:7,y:-2},'in')
    .to('#earL',1,{x:7,y:-2},'in')
    .to('#mouth',1,{y:-5,morphSVG:"#mouth2"},'in')
    .to('#bodyB',1,{scaleX:1.1},'in')
    .to("#headGroup",1,{x:0,y:0},'in')
    .to("#headShadow",1,{x:2,y:0,rotation:0},'in')
    .to('#frontFootR',1,{rotation:10,x:5,transformOrgin:"right bottom"},'in')
    .to('#frontFootL',1,{rotation:-5,x:0,y:2,transformOrgin:"right bottom"},'in')
    .to('#backFootR',1,{rotation:10,x:5,transformOrgin:"right bottom"},'in')
    .to('#backFootL',1,{rotation:5,x:2,transformOrgin:"right bottom"},'in')
    .to('#hole',1,{rotation:-3,transformOrigin:"center center"},'in')
    
const holeTl = new TimelineMax({paused:true});
holeTl.to('#hole',1,{
    scale:1
},'in')


const scrubTls = () => {
    let percentDragged = (dragInstance.target._gsTransform.x/10) * squealTl.duration();
    TweenMax.to(squealTl, 0.15, {
        time:percentDragged,
        ease:Power1.easeOut
    })
    TweenMax.to(holeTl,0.15,{
        time:percentDragged,
        ease:Power1.easeOut
    })
}


const tailWaggleTl = new TimelineMax({paused:true,repeat:-1});
tailWaggleTl.to('#tail',0.26,{
    rotation:3.5,
    transformOrigin:"left bottom"
})
.to('#tail',0.26,{
    rotation:0,
    transformOrigin:"left bottom"
})

const oinkTl = new TimelineMax({repeat:-1,repeatDelay:2})

oinkTl.to('#nose',0.16,{
    y:-1.5,
    rotation:2,
    ease:jiggleEase
},'oink')
.to('.nostril',0.16,{
    y:-1.5,
    rotation:2,
    ease:jiggleEase
},'oink')
.to('#mouth',0.16,{
    rotation:-5,
    ease:jiggleEase,
    transformOrigin:"left top",
    y:-1
},'oink')

const blinkTl = new TimelineMax({
    paused:true,
    repeat:-1,
    repeatDelay:2
});

blinkTl.to('#eyeWR',0.2,{scaleY:0,transformOrigin:"center center"},'in')
    .to('#eyeWL',0.2,{scaleY:0,transformOrigin:"center center"},'in')
    .to('#eyeWR',0.2,{scaleY:1,transformOrigin:"center center"},'in+=0.2')
    .to('#eyeWL',0.2,{scaleY:1,transformOrigin:"center center"},'in+=0.2')
    .to('#eyeRMask',0.2,{scaleY:0,transformOrigin:"center center"},'in')
    .to('#eyeRMask',0.2,{scaleY:1,transformOrigin:"center center"},'in+=0.2')
    .to('#eyeLMask',0.2,{scaleY:0,transformOrigin:"center center"},'in')
    .to('#eyeLMask',0.2,{scaleY:1,transformOrigin:"center center"},'in+=0.2')

const panicTl = new TimelineMax({
    paused:true,
    repeat:-1
});
panicTl.to('.nostril',0.64,{
    scale:1.3,
    transformOrigin:"center center",
    ease:nostrilEase
},'panic')
.to('#nose',0.64,{
    scale:1.1,
    transformOrigin:"center center",
    ease:jiggleEase
},'panic')

const panicStopTl = new TimelineMax({
    paused:true
})
panicStopTl.to('.nostril',0.64,{
    scale:1,
    ease:Power2.easeOut,
    onComplete:() => {
        TweenMax.set('.nostril',{
            clearProps:"all"
        })
        TweenMax.set(panicTl,{
            time:0
        })
    } 
},'stopPanicking')
.to('#nose',0.64,{
    scale:1,
    ease:Power2.easeOut
},'stopPanicking')

const coinTl = new TimelineMax({
    paused:true,
    id:"cointoss",
    onComplete:() => {
        TweenMax.set(holeTl,{time:0})
        TweenMax.set('#coin',{clearProps:"all"})
    }
})

coinTl.fromTo('#coin',0.32,{y:0,opacity:1},{y:-110, ease:coinEase},'coin')
    .to('#hole',0.20,{scale:0},'coin+=0.32')
    // add speed lines to coin tl 
    .to('.lineUp',0.06,{drawSVG:"0% 100%"},'coin+=0.03')
    .to('.lineUp',0.12,{drawSVG:"100% 100%",opacity:0},'coin+=0.1')
    .to('.lineDown',0.06,{drawSVG:"0% 100%"},'coin+=0.24')
    .to('.lineDown',0.12,{drawSVG:"100% 100%",opacity:0},'coin+=0.30')

const bodyJiggle = () => {
    TweenMax.to(dragInstance.target,0.1,{x:0})
    TweenMax.to('#bodyB',0.16,{scaleX:0.98,delay:0.1,ease:jiggleEase,repeat:1})
    TweenMax.to(dragInstance.target,0.16,{x:-4,delay:0.1,ease:jiggleEase,repeat:1})
    // shake body when coin enters hole
    TweenMax.to('#bodyB',0.16,{scaleY:1.03,delay:0.32,ease:jiggleEase})
    TweenMax.to('#bodyB',0.16,{scaleX:1,delay:0.48})
}

const jiggleAlt = () => {
    TweenMax.to(dragInstance.target,0.1,{x:0})
    TweenMax.to('#bodyB',0.16,{scaleX:0.98,delay:0.1,ease:jiggleEase,repeat:1})
    TweenMax.to(dragInstance.target,0.16,{x:-4,delay:0.1,ease:jiggleEase,repeat:1})
    TweenMax.to('#bodyB',0.16,{scaleX:1,delay:0.42,ease:Power1.easeOut})
}

const hideParticles = () => {
    TweenMax.set(particleR,{
        alpha:0,
        onComplete:() => {
            particleRTl.stop();
        }
    })
    TweenMax.set(particleL,{
        alpha:0,
        onComplete:() => {
            particleLTl.stop();
        }
    })
}

// Move legs on coin impact

const legImpact = () => {
    const legImpactTl = new TimelineMax({delay:0.34});
legImpactTl.to('#frontFootR',0.24,{rotation:3,x:0,transformOrgin:"right bottom",ease:jiggleEase},'in')
    .to('#frontFootL',0.24,{rotation:-3,x:0,y:2,transformOrgin:"right bottom",ease:jiggleEase},'in')
    .to('#backFootR',0.24,{rotation:3,x:5,transformOrgin:"right bottom",ease:jiggleEase},'in')
    .to('#backFootL',0.24,{rotation:-5,x:0,transformOrgin:"right bottom",ease:jiggleEase},'in')
    return legImpactTl;
}


// head movement on coin impact
const headImpact = () => {
    headImpactTl = new TimelineMax();

    headImpactTl.set('#eyes',{opacity:0},'impact')
    .set('#eyeSquint',{opacity:1},'impact')
    .to('#headGroup',0.24,{y:3,scaleY:0.95,transformOrigin:"center bottom",ease:coinEase,delay:0.34},'impact')
    .to('#eyeSquint',0.24,{y:-2,ease:Power1.easeOut},'impact')
    TweenMax.to('#eyeSquint',0.24,{scale:1.1,y:4,delay:0.34,ease:jiggleEase,onComplete:() => {
        TweenMax.set('#eyes',{opacity:1})
        TweenMax.set('#eyeSquint',{opacity:0,y:2})
        // stop blinkTl --> open eyes after squint eyes disappear
        TweenMax.fromTo('#eyeWR',0.25,{scaleY:0,immediateRender:false},{scaleY:1,transformOrigin:"center center",delay:0,onComplete:()=> {
        blinkTl.progress(0);
        setTimeout(() => {
            blinkTl.play();
        },2000)
    }},'openEyes')
    TweenMax.fromTo('#eyeWL',0.25,{scaleY:0,immediateRender:false},{scaleY:1,transformOrigin:"center center"},'openEyes')
    TweenMax.fromTo('#eyeRMask',0.25,{scaleY:0,immediateRender:false},{scaleY:1,transformOrigin:"center center"},'openEyes')
    TweenMax.fromTo('#eyeLMask',0.25,{scaleY:0,immediateRender:false},{scaleY:1,transformOrigin:"center center"},'openEyes')
    }})
    return headImpactTl;
}


const dragInstance  = new Draggable('#tail',{
    type:"x",
    lockAxis:"true",
    bounds:{minX:0,maxX:10},
    dragResistance:0.9,
    ondrag: () => {
        // hide arrow
        TweenMax.set('#arrow',{opacity:0,onComplete:() => arrowTl.stop()})

        scrubTls();
        tailWaggleTl.pause();
        oinkTl.stop();
        if (dragInstance.target._gsTransform.x < 10 && dragInstance.getDirection("velocity") === "left") {
            hideParticles();
        }
        if (dragInstance.target._gsTransform.x > 5) {
            panicTl.play();
        }
        if (dragInstance.target._gsTransform.x > 8 ) {
            particleLTl.play();
            particleRTl.play();
        }
        if (dragInstance.target._gsTransform.x === 10 ) {
            panicTl.play();
        } 
    },
    ondragEnd: () => {
        TweenMax.to(squealTl, 0.2, {
            time:0,
            ease:Power1.easeOut
        })
        // stop the waterfalls -- hide particles then stop tl
        hideParticles();
        // resume the waggling
        tailWaggleTl.resume();
        // keep on oinking on
        oinkTl.play();
        // stop the nostril flaring
        panicTl.stop();
        // scale down the nostrils after the piggy has calmed down
        panicStopTl.progress() === 0 ? panicStopTl.play() : panicStopTl.restart();
        
        if (dragInstance.target._gsTransform.x < 10) {
            TweenMax.to(holeTl,0.2,{
                time:0,
                ease:Power1.easeOut
            })
        }
        if (dragInstance.target._gsTransform.x > 0 && dragInstance.target._gsTransform.x != 10) {
            jiggleAlt();
        }
        if (dragInstance.target._gsTransform.x === 10) {
            coinTl.progress() === 0 ? coinTl.play() : coinTl.restart();
            bodyJiggle();
            blinkTl.stop();  
            //
            legImpact();
            //  
            headImpact();
        }  
    }
})


const arrowTl = new TimelineMax({delay:0.5,repeat:-1,repeatDelay:0.3});
    arrowTl.staggerTo('#arrow polyline',0.3,{alpha:1,ease:Sine.easeInOut},0.15,'in')
        .staggerTo('#arrow polyline',0.3,{alpha:0,ease:Sine.easeInOut},0.15,'in+=0.3')


const onload = () => {
    blinkTl.play();
    tailWaggleTl.play();

}

onload();

Ссылки

https://codepen.io/kdbkapsere/pen/vYBQLRv

Свинья-копилка

HTML

CSS

JS

Комментарии

Похожие статьи

Редактор кода, каким пользуетесь?