<div class="header">
<h1><strong>SVG</strong> hotspot/play button</h1>
<p>Prototype made with TimelineMax</p>
</div>
<div class="play-button">
<div class="circle">
<div class="icon"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/40480/play.svg" alt="" class="svg-inject"></div>
<div class="black"><svg height="62" width="62"><circle cx="31" cy="31" r="8" fill="transparent" stroke="#171521" stroke-width="2" /></svg></div>
<div class="yellow"><svg height="48" width="48"><circle cx="24" cy="24" r="24" fill="#f3d178" /></svg></div>
<div class="border"><svg height="72" width="72"><circle cx="36" cy="36" r="36" fill="transparent" stroke="#f3d178" stroke-width="1" stroke-dasharray="4,3" /></svg></div>
<div class="white"><svg height="120" width="120"><circle cx="60" cy="60" r="33" fill="#fff" /></svg></div>
<div class="lines"></div>
</div>
<div class="text">Hover me</div>
</div>
@import "compass";
@function rem($px, $base: 16px) {
@return ($px / $base) * 1rem;
}
@function em($px, $base: 16px) {
@return ($px / $base) * 1em;
}
@mixin setInCenter($width, $height) {
position: absolute;
top: 50%;
left: 50%;
width: $width;
height: $height;
margin-top: -($height/2);
margin-left: -($width/2);
@content;
}
body {
background: #2c283f;
font-family: Montserrat, sans-serif;
color: #fff;
}
.header {
position: absolute;
top: 50%;
width: 100%;
margin-top: -130px;
text-align: center;
h1 {
font-size: 31px;
font-family: Montserrat, sans-serif;
text-transform: uppercase;
font-weight: normal;
pointer-events: none;
letter-spacing: 1px;
}
h1 strong {
font-weight: 700;
color: #f3d178;
}
p {
font-family: 'Playfair Display', serif;
font-style: italic;
font-size: 16px;
font-weight: normal;
margin-top: 10px;
letter-spacing: 1px;
}
}
.play-button {
position: absolute;
top: 50%;
left: 50%;
width: rem(100px);
height: rem(80px);
margin-top: rem(0px);
margin-left: rem(-50px);
font-size: rem(16px);
cursor: pointer;
> .circle {
position: relative;
width: em(34px);
height: em(34px);
margin: auto;
}
> .circle > .icon {
position: absolute;
z-index: 5;
@include setInCenter(em(12px), em(14px));
display: none;
margin-left: -0.29em;
}
> .circle > .black {
z-index: 4;
@include setInCenter(62px, 62px);
opacity: 0.9;
}
> .circle > .yellow {
position: absolute;
z-index: 3;
@include setInCenter(48px, 48px);
}
> .circle > .border {
position: absolute;
z-index: 2;
@include setInCenter(72px, 72px);
}
> .circle > .white {
position: absolute;
z-index: 2;
@include setInCenter(120px, 120px);
opacity: 0.1;
}
> .circle > .lines {
position: absolute;
display: none;
}
> .text {
position: relative;
margin-top: em(38px);
font-size: em(12px);
color: #fff;
text-transform: uppercase;
text-align: center;
}
}
View Compiled
var self = this;
var $playBtn = $('.play-button');
TweenMax.set($playBtn.find('circle'), { transformOrigin: "center center" });
self.pulseTl = new TimelineMax({ yoyo: true, repeat: -1 });
self.pulseTl.fromTo($playBtn.find('.white'), 2, { scale: 1 }, { scale: 1.2, ease: Power2.easeInOut });
self.spinTl = new TimelineMax({ repeat: -1 });
self.spinTl.to($playBtn.find('.border'), 5, { rotation: 360, ease: Linear.easeNone });
var onReverse = function() {
var self = this;
self.pulseTl.resume();
self.spinTl.pause();
};
self.hoverTl = new TimelineMax({ paused: true, onReverseComplete: onReverse, onReverseCompleteScope: self });
self.hoverTl.to($playBtn.find('.black circle'), .25, { scale: 0, ease: Circ.easeIn }, "start")
.to($playBtn.find('.yellow circle'), .45, { scale: 0, ease: Circ.easeIn }, "start")
.set($playBtn.find('.black circle'), { fill: '#171521' })
.set($playBtn.find('.icon'), { display: 'block' })
.to($playBtn.find('.black circle'), .20, { scale: 3.4, ease: Circ.easeOut }, "end")
.from($playBtn.find('.border circle'), .35, { scale: 0, ease: Circ.easeOut }, "end")
.to($playBtn.find('.white circle'), .45, { scale: 1.4, ease: Back.easeOut }, "end")
.to($playBtn.find('.text'), .55, { y: 15, ease: Back.easeOut }, "end");
self.hoverTl.timeScale(1.1);
$playBtn.on('click', function() {
$el = $(this);
})
.on('mouseenter', function() {
$el = $(this);
self.pulseTl.pause();
self.hoverTl.play();
self.spinTl.play();
})
.on('mouseleave', function() {
$el = $(this);
self.hoverTl.reverse();
});