GSAP

by iBertel

HTML

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

<!-- Generator: Adobe Illustrator 22.1.0, SVG Export Plug-In  -->
<svg id="trash" version="1.1" x="0px" y="0px" width="24" height="27" viewBox="0 0 24 27">

<style type="text/css">
	.st0{fill:#CCDEEE;}
</style>
<g>
	<rect width="10" x="5" y="10" height="10" class="st0 trash"/>
</g>

<g class="can">
	<g>
		<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: 0,
        y: -20,
        attr: {
          width: 10,
          height: 10
        }
      }, {
        opacity: 1,
        x: 0,
        y: 0,
        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";