Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Stop Go Radio Button
<svg viewBox="0 0 800 600" xmlns="http://www.w3.org/2000/svg">
<defs>
</defs>
<line id="base" fill="none" stroke="#BBBABB" stroke-width="100" stroke-linecap="round" stroke-miterlimit="10" x1="350" y1="300" x2="450" y2="300"/>
<line id="lineSelector" fill="none" stroke="#224687" stroke-width="60" stroke-linecap="round" stroke-miterlimit="10" x1="350" y1="300" x2="350" y2="300"/>
<circle id="hitL" cx="350" cy="300" r="40" fill="#EEE" opacity="0"/>
<circle id="hitR" cx="450" cy="300" r="40" fill="#EEE" opacity="0"/>
<line id="hitArea" fill="none" stroke="transparent" stroke-width="100" stroke-linecap="round" stroke-miterlimit="10" x1="350" y1="300" x2="450" y2="300"/>
</svg>
var xmlns = "http://www.w3.org/2000/svg",
xlinkns = "http://www.w3.org/1999/xlink",
select = function(s) {
return document.querySelector(s);
},
selectAll = function(s) {
return document.querySelectorAll(s);
},
lineSelector = select('#lineSelector'),
hitArea = select('#hitArea'),
hitL = select('#hitL'),
hitR = select('#hitR'),
base = select('#base'),
selectorColorArray = ['#4CAF50', '#F44336']
TweenMax.set('svg', {
visibility: 'visible'
})
var introTl = new TimelineMax({paused:false, onComplete:createInteraction});
introTl.from(base, 0.4, {
strokeWidth:0,
delay:1
})
.from(lineSelector, 0.2, {
strokeWidth:0
},'-=0.2')
.from(base, 0.4, {
attr:{
x1:400,
x2:400
},
ease:Anticipate.easeIn
})
.from(lineSelector, 0.4, {
attr:{
x1:400,
x2:400
},
ease:Anticipate.easeIn
},'-=0.4')
var tl = new TimelineMax({paused:true});
function createInteraction(){
tl.to(lineSelector, 0.5, {
attr:{
x2:450
},
strokeWidth:30,
ease:Power1.easeIn
})
.from(hitL, 1, {
attr:{
r:30
},
alpha:1,
immediateRender:false,
ease:Power1.easeOut
},'-=0.5')
.to(lineSelector, 1, {
attr:{
x1:450
},
strokeWidth:60,
stroke:selectorColorArray[0],
ease:Elastic.easeOut.config(1, 0.59)
},'-=0.5')
.to(base, 0.15,{
attr:{
x2:460
},
repeat:1,
yoyo:true
},'-=0.85')
.to(base, 0.15,{
attr:{
x1:348
},
repeat:1,
yoyo:true
},'-=0.6')
.addPause()
.to(lineSelector, 0.5, {
attr:{
x1:350
},
strokeWidth:30,
ease:Power1.easeIn
})
.from(hitR, 1, {
attr:{
r:30
},
alpha:1,
immediateRender:false,
ease:Power1.easeOut
},'-=0.5')
.to(lineSelector, 1, {
attr:{
x2:350
},
strokeWidth:60,
stroke:selectorColorArray[1],
ease:Elastic.easeOut.config(1, 0.59)
},'-=0.5')
.to(base, 0.15,{
attr:{
x1:340
},
repeat:1,
yoyo:true
},'-=0.85')
.to(base, 0.15,{
attr:{
x2:452
},
repeat:1,
yoyo:true
},'-=0.6')
hitArea.onclick = function(){
if(tl.time() == tl.duration()){
tl.play(0)
} else {
tl.play()
}
}
hitArea.ontouchstart = hitArea.onclick;
tl.timeScale(1.8);
tl.progress(1);
}
<script src="//cdnjs.cloudflare.com/ajax/libs/gsap/1.18.3/TweenMax.min.js"></script>
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/35984/AnticipateEase.min.js"></script>

Stop Go Radio Button

Trying to add fun and style to interactivity while keeping it simple. I've made this with Material Design in mind although I haven't stuck rigidly to it because I find Material Design can be quite brash so I just take the bits I like :)

A Pen by Chris Gannon on CodePen.

License.

body {
background-color:#FFF;
overflow: hidden;
}
body,
html {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
svg{
width:100%;
height:100%;
visibility:hidden;
}
#hitArea{
cursor:pointer;
}
#base{
stroke:#263238;
}
#lineSelector{
stroke:#F44336;
}
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.