Tilt Toggle

index.html

<svg id="mainSVG" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 600">
<g id="whole">
      <g id="togglePanel">
        <path d="M331.5,328.5a45.5,45.5,0,0,1,0-91h115a45.5,45.5,0,0,1,0,91Z" fill="#f2f2f2"/>
        <path d="M446.5,241a42,42,0,0,1,0,84h-115a42,42,0,0,1,0-84h115m0-7h-115a49.14,49.14,0,0,0-49,49h0a49.14,49.14,0,0,0,49,49h115a49.14,49.14,0,0,0,49-49h0a49.14,49.14,0,0,0-49-49Z" fill="#f4f9f6"/>
      </g>
     <line id="fillLine2" x1="331" y1="283" x2="446" y2="283" fill="none" stroke="#ED4D6E" stroke-linecap="round" stroke-linejoin="round" stroke-width="84"/>
      <line id="fillLine1" x1="331" y1="283" x2="446" y2="283" fill="none" stroke="#A0CA4C" stroke-linecap="round" stroke-linejoin="round" stroke-width="84"/>
      <g id="dragger">
        <ellipse cx="330" cy="283" rx="40.5" ry="41" fill="#fcfcfc"/>
        <path d="M330,243c21.78,0,39.5,17.94,39.5,40s-17.72,40-39.5,40-39.5-17.94-39.5-40,17.72-40,39.5-40m0-2c-22.92,0-41.5,18.8-41.5,42s18.58,42,41.5,42,41.5-18.8,41.5-42-18.58-42-41.5-42Z" fill="#e1e5e1"/>
      </g>
	</g>
</svg>

script.js

let select = s => document.querySelector(s),
  selectAll = s =>  document.querySelectorAll(s),
		mainSVG = select('#mainSVG'),
		toggleOn = false,
		whole = select('#whole')

gsap.set('svg', {
	visibility: 'visible'
})
gsap.set(whole, {
	transformOrigin: '50% 50%',
	rotation: 23
})
gsap.set('#dragger', {
	x: 117
})
gsap.set('#fillLine1', {
	drawSVG: '100% 100%'
})
gsap.set('#fillLine2', {
	drawSVG: '0% 100%'
})

let bounce = CustomBounce.create('',{strength:0.6, squash:3, squashID:"bounce-squash"})
function clickToggle(e) {
	

	toggleOn = !toggleOn;
	
	if(toggleOn) {
		let tl = gsap.timeline();
		tl.to(whole, {
			ease: 'expo',
			rotation: (e.shiftKey) ? 0 : -23
		})
		.to('#dragger', {
			duration: 0.7,
			ease: (e.shiftKey) ? 'elastic(0.4, 0.8)' : bounce,
			x: 0
		}, (e.shiftKey) ? 0 : 0.2)

		.to('#fillLine1', {
			duration: 0.7,
			drawSVG: '0% 100%',
			ease: (e.shiftKey) ? 'elastic(0.4, 0.8)' : bounce			
		}, (e.shiftKey) ? 0 : 0.2)
	.to('#fillLine2', {
			duration: 0.7,
			drawSVG: '0% 0%',
			ease: (e.shiftKey) ? 'elastic(0.4, 0.8)' : bounce			
		}, (e.shiftKey) ? 0 : 0.2)
	} else {
		let tl = gsap.timeline();
		tl.to(whole, {
			ease: 'expo',
			rotation: (e.shiftKey) ? 0 : 23
		})
		.to('#dragger', {
			duration: 0.7,
			ease: (e.shiftKey) ? 'elastic(0.4, 0.8)' : bounce,
			x: 117
		}, (e.shiftKey) ? 0 : 0.2)

		
		.to('#fillLine1', {
			duration: 0.7,
			drawSVG: '100% 100%',
			ease: (e.shiftKey) ? 'elastic(0.4, 0.8)' : bounce			
		}, (e.shiftKey) ? 0 : 0.2)
		
		.to('#fillLine2', {
			duration: 0.7,
			drawSVG: '0% 100%',
			ease: (e.shiftKey) ? 'elastic(0.4, 0.8)' : bounce			
		}, (e.shiftKey) ? 0 : 0.2)
		
	}
	
}

whole.addEventListener('click', clickToggle)

//gsap.globalTimeline.timeScale(0.25)

scripts

<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/gsap-latest-beta.min.js"></script>
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/DrawSVGPlugin3.min.js"></script>
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/CustomEase3.min.js"></script>
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/CustomBounce3.min.js"></script>

style.css

body {
 background-color: #02394A;
 overflow: hidden;
 text-align:center;
  display: flex;
  align-items: center;
  justify-content: center; 
}

body,
html {
 height: 100%;
 width: 100%;
 margin: 0;
 padding: 0;
}

svg {
 width: 100%;
 height: 100%;
 visibility: hidden;
 
}

#whole {
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}

tilt-toggle.markdown

Tilt Toggle

I haven't made a toggle for ages so this is me having fun and scratching an itch!

A Pen by Chris Gannon on CodePen.

License.