I haven't made a toggle for ages so this is me having fun and scratching an itch!
Created
January 14, 2023 13:22
-
-
Save j-chimienti/cd511bfeac8e7b12422f5b4d709191b0 to your computer and use it in GitHub Desktop.
Tilt Toggle
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment