GSAP

by iBertel

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script>
<button class="putToTrash">
	Put to trash
</button>


<svg version="1.1" x="0px" y="0px" width="24" height="27" viewBox="0 0 24 27">

<g class="trash">
  <style type="text/css">
    .st1{fill:#F60;}
  </style>
  <g>
    <rect class="st1" width="10" height="10"/>
  </g>
</g>

<g class="can">
<style type="text/css">
	.st0{fill:#F5F5F5;}
</style>
	<g>
		<path class="st0" d="M4.3,26c-0.2,0-0.5-0.2-0.5-0.4l-2.5-16c0-0.2,0.1-0.3,0.1-0.4C1.4,9.1,1.6,9,1.8,9h20.5
			c0.2,0,0.3,0.1,0.4,0.2c0.1,0.1,0.1,0.2,0.1,0.4l-2.5,16c0,0.2-0.2,0.4-0.5,0.4H4.3z"/>
		<path d="M21.7,10l-2.4,15H4.7L2.3,10H21.7 M22.2,8H1.8C0.8,8,0.1,8.8,0.3,9.7l2.5,16C2.9,26.5,3.5,27,4.3,27h15.4
			c0.7,0,1.4-0.5,1.5-1.3l2.5-16C23.9,8.8,23.2,8,22.2,8L22.2,8z"/>
	</g>
	<g>
		<path d="M7,19L7,19c-0.6,0-1-0.4-1-1v-5c0-0.6,0.4-1,1-1h0c0.6,0,1,0.4,1,1v5C8,18.6,7.6,19,7,19z"/>
	</g>
	<g>
		<path d="M12,21L12,21c-0.6,0-1-0.4-1-1v-7c0-0.6,0.4-1,1-1h0c0.6,0,1,0.4,1,1v7C13,20.6,12.6,21,12,21z"/>
	</g>
	<g>
		<path d="M17,19L17,19c-0.6,0-1-0.4-1-1v-5c0-0.6,0.4-1,1-1h0c0.6,0,1,0.4,1,1v5C18,18.6,17.6,19,17,19z"/>
	</g>
</g>

<g class="lit">
	<path d="M23,3H13V1c0-0.6-0.4-1-1-1s-1,0.4-1,1v2H1C0.4,3,0,3.4,0,4c0,0.6,0.4,1,1,1h22c0.6,0,1-0.4,1-1C24,3.4,23.6,3,23,3z"/>
</g>

</svg>

CSS

body {
  padding: 200px;
}

svg {
  overflow: visible;
}

JavaScript 1.7

const trash = () => {
  TweenMax.to(".lit", 1, {
    rotation: 35,
    y: -5,
    transformOrigin: "100% 50%",
    ease: Expo.easeInOut,
    onComplete() {
      TweenMax.fromTo(".trash", 1, {
        opacity: 0,
        x: 6,
        y: -15,
        attr: {
          width: 10,
          height: 10
        }
      }, {
        opacity: 1,
        x: 6,
        y: 10,
        attr: {
          width: 10,
          height: 10
        },
        onComplete() {
          TweenMax.to(".lit", 1, {
            rotation: 0,
            y: 0,
            transformOrigin: "100% 50%",
            ease: Expo.easeInOut
          })
        }
      })
    }
  })

}

document.querySelector(".putToTrash").addEventListener("click", () => {
  trash();
})
// import { TweenMax } from "gsap";