GSAP морфинг SVG анимация - PullRequest
Новая
       103

GSAP морфинг SVG анимация

0 голосов
/ 01 мая 2020

Есть ли способ, чтобы моя анимация была завершена двумя оставленными линиями, превращающимися в зеленое "Х" для меню гамбургеров? У меня анимация запускается так, как мне хотелось бы, но остальное я не могу понять. Любые идеи будут великолепны! спасибо!

codepen https://codepen.io/MarkDonatelli/pen/ZEbXoLm

html: 

<svg id="hamburger" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" width="25px" height="25px" viewBox="0 0 512 512">
     <defs>
       <style>.cls-1{fill:#fff;}.cls-2{fill:#5dc199;}</style>
     </defs>
     <path id="Line1" class="cls-1" d="M479.18,91.9H32.82a32.82,32.82,0,0,1,0-65.64H479.18a32.82,32.82,0,0,1,0,65.64Z"/>
     <path id="Line2" class="cls-1" d="M295.39,288.82H32.82a32.82,32.82,0,0,1,0-65.64H295.39a32.82,32.82,0,0,1,0,65.64Z"/>
     <path id="Line2Green" class="cls-2" d="M479.18,288.82H426.67a32.82,32.82,0,1,1,0-65.64h52.51a32.82,32.82,0,1,1,0,65.64Z"/>
     <path id="Line4" class="cls-1" d="M479.18,485.74H32.82a32.82,32.82,0,0,1,0-65.64H479.18a32.82,32.82,0,0,1,0,65.64Z"/>
   </svg>

js: 

   var cEase = CustomEase.create("custom", "M0,0,C0.033,0,0.026,0.204,0.146,0.216,0.294,0.23,0.294,-0.178,0.464,-0.178,0.616,-0.178,0.832,0.19,1,1");
    var tlNew = new TimelineLite({paused: true, reversed: true})

    tlNew.to(Line1, 0.5, {
      attr: {d: "M479.18,91.9H32.82a32.82,32.82,0,0,1,0-65.64H479.18a32.82,32.82,0,0,1,0,65.64Z"},
      ease: cEase
    }, 'start');
    tlNew.to(Line4, 0.5, {
      attr: {d: "M479.18,485.74H32.82a32.82,32.82,0,0,1,0-65.64H479.18a32.82,32.82,0,0,1,0,65.64Z"},
      ease: cEase
    }, 'start');
    tlNew.to(Line2Green, 1, {
      attr: {d: "M479.18,288.82H426.67a32.82,32.82,0,1,1,0-65.64h52.51a32.82,32.82,0,1,1,0,65.64Z"},
      ease: cEase
    }, 'start');
    tlNew.to(Line1, 0.5, {scaleX: 0, transformOrigin: '50% 50%', ease: Back.easeIn}, 'start');
    tlNew.to(Line4, 0.5, {scaleX: 0, transformOrigin: '50% 50%', ease: Back.easeIn}, 'start');

    document.querySelector('#hamburger').addEventListener('click', function () {
      tlNew.reversed() ? tlNew.play() : tlNew.reverse();
    });
...