Анимация 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();