Sass Sticker Peel 😎

by rwhal06

HTML

See <a href="https://codepen.io/bsehovac/pen/aqVobv">https://codepen.io/bsehovac/pen/aqVobv</a>
<div class="help">click to peel/unpeel</div>

<div class="wrapper">
  <div class="sticker is-peeled">
    <div class="sticker__face sticker__face--front">
      <div class="sticker__holder">
        <div class="sticker__content">
          <div class="sticker__shadow"></div>
        </div>
      </div>
    </div>
    <div class="sticker__face sticker__face--back">
      <div class="sticker__holder">
        <div class="sticker__content">
          <div class="sticker__shadow"></div>
        </div>
      </div>
    </div>
  </div>
  
</div>

SASS

// Variables

$peel-start: 0.175
$peel-end: 0.8

$transition-speed: 1.25s
$transition-easing: cubic-bezier(0.455, 0.03, 0.515, 0.955)

$imgWidth: 250px
$imgHeight: 250px
$sass-logo:...

JavaScript

const sticker = document.querySelector('.sticker')
let peeled = false

sticker.onclick = () => {
  if (peeled = !peeled)
    sticker.classList.add('is-peeled')
  else
    sticker.classList.remove('is-peeled')
}

setTimeout(() => {
  sticker.classList.remove('is-peeled')
}, 0)