I'm creating animation for my logo with TweenMax TimeLine. And I'm getting weird error. Its creating some type of glitch.
Here is codepen playground to test it. https://codepen.io/innocentabi/pen/ZZpaVJ
Code is
var tl = new TimelineLite();
var tween = tl.to(".logo", 0.5, {
morphSVG: {
shape: ".oneclosed",
type: "rotational"
},
ease: Power1.easeInOut,
repeat: 1,
repeatDelay: 0.5,
yoyo: true,
delay: 0.5
}
).to(".logo", 0.5, {
morphSVG: {
shape: ".bothclosed",
type: "rotational"
},
ease: Power1.easeInOut,
repeat: 1,
repeatDelay: 0.5,
yoyo: true,
delay: 0.5
}
);
I'm expecting end result smooth. But I'm facing issues. This is my original logo http://prntscr.com/n922rd Winked version https://prnt.sc/n9238z Both eyes closed version http://prntscr.com/n923xs
I need logo to winked, winked to again logo. now logo to both closed.
The problem is caused by the first part of every path, the outer mask. An easy solution would be removing this part and use it to make a different path that do not morph. For the rest you need to change the color to #222. This isn't such a nice solution since instead of holes you have a dark (#222) path but it works:
<link href='//fonts.googleapis.com/css?family=Signika+Negative:300,400,600' rel='stylesheet' type='text/css'>
<svg viewBox="0 0 841.9 595.3" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMin">
<path fill="#3a32b3" d="M750,5.2c-20.4-1-60.5,0.7-127.4,17.6c0,0-325.5,58.9-535.4,306.6c0,0-83.3,78.9-55.5,191.1 c0,0,28.9,106.6,160,61.1c0,0,79.8-26.1,189.9-163.7c5.6-7,15.9-7.8,22.6-1.9c37.7,33.1,150.9,130.8,199.6,155.6 c0,0,80.3,51.3,137.3-34.2c9.2-13.8,15.8-29,20.5-44.8c10.5-35.1,32.6-116.7,40-202.3c0.7-8.1,1.5-16.3,2.6-24.4 c5.5-39.5,22.2-181.9-14.2-238.3C781.2,14,766,6,750,5.2z" />
<path class="logo" fill="#222" d="M203.8,538.3C90.5,596,65,507.2,65,507.2C31.7,366.1,185,351.7,185,351.7 c82.6-11.7,135.1,12.1,159.1,27.4c8.7,5.5,10.5,17.4,3.8,25.3C261,507.7,203.8,538.3,203.8,538.3z M709.3,514.9 c0,0-25,60.4-90,22.2c0,0-38.2-16-191.7-145.9c-7-6-8.1-16.4-2.3-23.6c41.9-51.6,200.6-244.5,289.1-313.4 c5.4-4.2,11.4-7.7,17.9-10.1c13.8-5.1,34.1-6.9,37,24.2C769.3,68.4,785.9,377.2,709.3,514.9z" />
<path class="oneclosed" fill="#3a32b3" d="M203.8,538.3C90.5,596,65,507.2,65,507.2C31.7,366.1,185,351.7,185,351.7 c82.6-11.7,135.1,12.1,159.1,27.4c8.7,5.5,10.5,17.4,3.8,25.3C261,507.7,203.8,538.3,203.8,538.3z M709.3,398.4c0,0-25,7.6-90,2.8 c0,0-38.2-2-191.7-18.4c-7-0.8-8.1-2.1-2.3-3c41.9-6.5,200.6-30.8,289.1-39.5c5.4-0.5,11.4-1,17.9-1.3c13.8-0.6,34.1-0.9,37,3 C769.3,342.1,785.9,381.1,709.3,398.4z" />
<path class="bothclosed" fill="#3a32b3" d=" M203.8,409.2C90.5,420.1,65,403.4,65,403.4c-33.3-26.5,120-29.3,120-29.3 c82.6-2.2,135.1,2.3,159.1,5.2c8.7,1,10.5,3.3,3.8,4.8C261,403.5,203.8,409.2,203.8,409.2z M709.3,398.4c0,0-25,7.6-90,2.8 c0,0-38.2-2-191.7-18.4c-7-0.8-8.1-2.1-2.3-3c41.9-6.5,200.6-30.8,289.1-39.5c5.4-0.5,11.4-1,17.9-1.3c13.8-0.6,34.1-0.9,37,3 C769.3,342.1,785.9,381.1,709.3,398.4z" />
</svg>
Next I've tried to change the path by removing a few points at the right side or the mask. It's the same shape but with fewer points.
<link href='//fonts.googleapis.com/css?family=Signika+Negative:300,400,600' rel='stylesheet' type='text/css'>
<svg viewBox="0 0 841.9 595.3" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMin">
<path class="logo" fill="#3a32b3" d="M750, 5.2
C729.6, 4.2 689.5, 5.9 622.6, 22.8
C622.6, 22.8 297.1, 81.7 87.2, 329.4
C87.2, 329.4 3.9, 408.3 31.7, 520.5
C31.7, 520.5 60.6, 627.1 191.7, 581.6
C191.7, 581.6 271.5, 555.5 381.6, 417.9
C387.2, 410.9 397.5, 410.1 404.2, 416
C441.9, 449.1 555.1, 546.81 603.8, 571.6
C603.8, 571.6 684.1, 622.9 741.1, 537.4
C750.3, 523.6 756.9, 508.4 761.6, 492.6
C772.1, 457.5 794.2, 375.9 804.2, 265.9
C809.7, 226.4 826.4, 84 790, 27.6
C781.2, 14 766, 6 750, 5.2 Z
M203.8,538.3C90.5,596,65,507.2,65,507.2C31.7,366.1,185,351.7,185,351.7 c82.6-11.7,135.1,12.1,159.1,27.4c8.7,5.5,10.5,17.4,3.8,25.3C261,507.7,203.8,538.3,203.8,538.3z M709.3,514.9 c0,0-25,60.4-90,22.2c0,0-38.2-16-191.7-145.9c-7-6-8.1-16.4-2.3-23.6c41.9-51.6,200.6-244.5,289.1-313.4 c5.4-4.2,11.4-7.7,17.9-10.1c13.8-5.1,34.1-6.9,37,24.2C769.3,68.4,785.9,377.2,709.3,514.9z" />
<path class="oneclosed" fill="#3a32b3" d="M750, 5.2
C729.6, 4.2 689.5, 5.9 622.6, 22.8
C622.6, 22.8 297.1, 81.7 87.2, 329.4
C87.2, 329.4 3.9, 408.3 31.7, 520.5
C31.7, 520.5 60.6, 627.1 191.7, 581.6
C191.7, 581.6 271.5, 555.5 381.6, 417.9
C387.2, 410.9 397.5, 410.1 404.2, 416
C441.9, 449.1 555.1, 546.81 603.8, 571.6
C603.8, 571.6 684.1, 622.9 741.1, 537.4
C750.3, 523.6 756.9, 508.4 761.6, 492.6
C772.1, 457.5 794.2, 375.9 804.2, 265.9
C809.7, 226.4 826.4, 84 790, 27.6
C781.2, 14 766, 6 750, 5.2 Z
M203.8,538.3C90.5,596,65,507.2,65,507.2C31.7,366.1,185,351.7,185,351.7 c82.6-11.7,135.1,12.1,159.1,27.4c8.7,5.5,10.5,17.4,3.8,25.3C261,507.7,203.8,538.3,203.8,538.3z M709.3,398.4c0,0-25,7.6-90,2.8 c0,0-38.2-2-191.7-18.4c-7-0.8-8.1-2.1-2.3-3c41.9-6.5,200.6-30.8,289.1-39.5c5.4-0.5,11.4-1,17.9-1.3c13.8-0.6,34.1-0.9,37,3 C769.3,342.1,785.9,381.1,709.3,398.4z" />
<path class="bothclosed" fill="#3a32b3" d="M750, 5.2
C729.6, 4.2 689.5, 5.9 622.6, 22.8
C622.6, 22.8 297.1, 81.7 87.2, 329.4
C87.2, 329.4 3.9, 408.3 31.7, 520.5
C31.7, 520.5 60.6, 627.1 191.7, 581.6
C191.7, 581.6 271.5, 555.5 381.6, 417.9
C387.2, 410.9 397.5, 410.1 404.2, 416
C441.9, 449.1 555.1, 546.81 603.8, 571.6
C603.8, 571.6 684.1, 622.9 741.1, 537.4
C750.3, 523.6 756.9, 508.4 761.6, 492.6
C772.1, 457.5 794.2, 375.9 804.2, 265.9
C809.7, 226.4 826.4, 84 790, 27.6
C781.2, 14 766, 6 750, 5.2 Z
M203.8,409.2C90.5,420.1,65,403.4,65,403.4c-33.3-26.5,120-29.3,120-29.3 c82.6-2.2,135.1,2.3,159.1,5.2c8.7,1,10.5,3.3,3.8,4.8C261,403.5,203.8,409.2,203.8,409.2z M709.3,398.4c0,0-25,7.6-90,2.8 c0,0-38.2-2-191.7-18.4c-7-0.8-8.1-2.1-2.3-3c41.9-6.5,200.6-30.8,289.1-39.5c5.4-0.5,11.4-1,17.9-1.3c13.8-0.6,34.1-0.9,37,3 C769.3,342.1,785.9,381.1,709.3,398.4z" />
</svg>
I didn't change anything in your css or js, so I'm adding only the svg part. I hope you'll find it useful.