Skip to content

Instantly share code, notes, and snippets.

@CodeMyUI

CodeMyUI/index.html

Created Feb 16, 2020
Embed
What would you like to do?
Tilt Toggle
<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>
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)
<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>
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
You can’t perform that action at this time.