Pen Settings

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

You're using npm packages, so we've auto-selected Babel for you here, which we require to process imports and make it all work. If you need to use a different JavaScript preprocessor, remove the packages in the npm tab.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Use npm Packages

We can make npm packages available for you to use in your JavaScript. We use webpack to prepare them and make them available to import. We'll also process your JavaScript with Babel.

⚠️ This feature can only be used by logged in users.

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

HTML Settings

Here you can Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

            
              

	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">

	<link href='https://fonts.googleapis.com/css?family=Vollkorn|Lato:400,700' rel='stylesheet' type='text/css'>

  	
	<title>Radial SVG Slider | CodyHouse</title>
</head>
<body>
	<div class="cd-radial-slider-wrapper">
		<ul class="cd-radial-slider" data-radius1="60" data-radius2="1364" data-centerx1="110" data-centerx2="1290">
			<li class="visible">
				<div class="svg-wrapper">
					<svg viewBox="0 0 1400 800">
						<title>Animated SVG</title>
						<defs>
							<clipPath id="cd-image-1">
								<circle id="cd-circle-1" cx="110" cy="400" r="1364"/>
							</clipPath>
						</defs>

						<image height='800px' width="1400px" clip-path="url(#cd-image-1)" xlink:href="https://codyhouse.co/demo/radial-svg-slider/img/img-1.jpg"></image>
					</svg>
				</div> <!-- .svg-wrapper -->

				<div class="cd-radial-slider-content">
					<div class="wrapper">
						<div>
							<h2>Slide #1 Title</h2>
							<p>Lorem ipsum dolor sit amet, consectetur.</p>
							<a href="#0" class="cd-btn">Learn More</a>
						</div>
					</div>
				</div> <!-- .cd-radial-slider-content -->
			</li>

			<li class="next-slide">
				<div class="svg-wrapper">
					<svg viewBox="0 0 1400 800">
						<title>Animated SVG</title>
						<defs>
							<clipPath id="cd-image-2">
								<circle id="cd-circle-2" cx="1290" cy="400" r="60"/>
							</clipPath>
						</defs>

						<image height='800px' width="1400px" clip-path="url(#cd-image-2)" xlink:href="https://codyhouse.co/demo/radial-svg-slider/img/img-2.jpg"></image>
					</svg>
				</div> <!-- .svg-wrapper -->

				<div class="cd-radial-slider-content">
					<div class="wrapper">
						<div>
							<h2>Slide #2 Title</h2>
							<p>Lorem ipsum dolor sit amet, consectetur.</p>
							<a href="#0" class="cd-btn">Learn More</a>
						</div>
					</div>
				</div> <!-- .cd-radial-slider-content -->
			</li>

			<li>
				<div class="svg-wrapper">
					<svg viewBox="0 0 1400 800">
						<title>Animated SVG</title>
						<defs>
							<clipPath id="cd-image-3">
								<circle id="cd-circle-3" cx="110" cy="400" r="60"/>
							</clipPath>
						</defs>

						<image height='800px' width="1400px" clip-path="url(#cd-image-3)" xlink:href="https://codyhouse.co/demo/radial-svg-slider/img/img-3.jpg"></image>
					</svg>
				</div> <!-- .svg-wrapper -->

				<div class="cd-radial-slider-content">
					<div class="wrapper">
						<div>
							<h2>Slide #3 Title</h2>
							<p>Lorem ipsum dolor sit amet, consectetur.</p>
							<a href="#0" class="cd-btn">Learn More</a>
						</div>
					</div>
				</div> <!-- .cd-radial-slider-content -->
			</li>

			<li class="prev-slide">
				<div class="svg-wrapper">
					<svg viewBox="0 0 1400 800">
						<title>Animated SVG</title>
						<defs>
							<clipPath id="cd-image-4">
								<circle id="cd-circle-4" cx="110" cy="400" r="60"/>
							</clipPath>
						</defs>
						
						<image height='800px' width="1400px" clip-path="url(#cd-image-4)" xlink:href="https://i.telegraph.co.uk/multimedia/archive/03296/election-best-bori_3296441b.jpg"></image>
					</svg>
				</div> <!-- .svg-wrapper -->

				<div class="cd-radial-slider-content">
					<div class="wrapper">
						<div>
							<h2>Slide #4 Title</h2>
							<p>Lorem ipsum dolor sit amet, consectetur.</p>
							<a href="#0" class="cd-btn">Learn More</a>
						</div>
					</div>
				</div> <!-- .cd-radial-slider-content -->
			</li>
		</ul> <!-- .cd-radial-slider -->

		<ul class="cd-radial-slider-navigation">
			<li><a href="#0" class="next">Next</a></li>
			<li><a href="#0" class="prev">Prev</a></li>
		</ul> <!-- .cd-radial-slider-navigation -->
		
		<div class="cd-round-mask">
			<svg viewBox="0 0 1400 800">
				<defs>
					<mask id="cd-left-mask" height='800px' width="1400px" x="0" y="0" maskUnits="userSpaceOnUse">
						<path fill="white" d="M0,0v800h1400V0H0z M110,460c-33.137,0-60-26.863-60-60s26.863-60,60-60s60,26.863,60,60S143.137,460,110,460z"/>
				    </mask>

				    <mask id="cd-right-mask" height='800px' width="1400px" x="0" y="0" maskUnits="userSpaceOnUse">
						<path fill="white" d="M0,0v800h1400V0H0z M1290,460c-33.137,0-60-26.863-60-60s26.863-60,60-60s60,26.863,60,60S1323.137,460,1290,460z"/>
				    </mask>
				</defs>
			</svg>
		</div>
	</div> <!-- .cd-radial-slider-wrapper -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script>
	if( !window.jQuery ) document.write('<script src="js/jquery-2.2.1.min.js"><\/script>');
</script>
</body>

            
          
!
            
              /* https://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section, main {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}


/* -------------------------------- 

Primary style

-------------------------------- */
*, *::after, *::before {
  box-sizing: border-box;
}

html {
  font-size: 62.5%;
}

body {
  font-size: 1.6rem;
  font-family: "Lato", sans-serif;
  color: #0a0b15;
  background-color: #ffffff;
}

a {
  color: #6156a8;
  text-decoration: none;
}

img, svg, image {
  max-width: 100%;
}

/* -------------------------------- 

Slider

-------------------------------- */
.cd-radial-slider-wrapper {
  position: relative;
  width: 100%;
  max-width: 1100px;
  margin: 2em auto;
  /* hide horizontal scrollbar on IE11 */
  overflow: hidden;
}

.cd-radial-slider > li {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  opacity: 0;
  -webkit-transition: -webkit-transform .2s;
  transition: -webkit-transform .2s;
  transition: transform .2s;
  transition: transform .2s, -webkit-transform .2s;
  /* hide vertical scrollbar on IE11 */
  overflow: hidden;
}
.cd-radial-slider > li.visible {
  position: relative;
  opacity: 1;
}
.cd-radial-slider > li.is-animating, .cd-radial-slider > li.prev-slide, .cd-radial-slider > li.next-slide {
  opacity: 1;
}
.cd-radial-slider > li.is-animating {
  z-index: 2;
}
.cd-radial-slider > li.scale-down, .cd-radial-slider > li.move-up {
  z-index: 3;
}
.cd-radial-slider > li.move-up {
  /* class added to the navigation round element when clicked - used to create the click effect */
  -webkit-animation: cd-clicked .2s;
          animation: cd-clicked .2s;
}
.cd-radial-slider > li.scale-down {
  /* class added to the navigation round element to create the scale down effect  */
  -webkit-transform: scale(0);
      -ms-transform: scale(0);
          transform: scale(0);
}
.cd-radial-slider > li.prev-slide image, .cd-radial-slider > li.next-slide image {
  /* make sure the prev/next round elements are visible */
  z-index: 3;
}
.cd-radial-slider > li.next-slide {
  /* for the scale-down/click effect - change the transform origin so that it is the center of the navigation round element */
  -webkit-transform-origin: 92.14% 50%;
      -ms-transform-origin: 92.14% 50%;
          transform-origin: 92.14% 50%;
}
.cd-radial-slider > li.prev-slide {
  -webkit-transform-origin: 7.86% 50%;
      -ms-transform-origin: 7.86% 50%;
          transform-origin: 7.86% 50%;
}

.cd-radial-slider .svg-wrapper {
  position: relative;
  z-index: 1;
  /* using padding Hack to fix bug on IE - svg height not properly calculated */
  height: 0;
  padding-bottom: 57.15%;
}

.cd-radial-slider li.prev-slide .svg-wrapper,
.cd-radial-slider li.next-slide .svg-wrapper {
  /* change its z-index so that it's always below the .cd-radial-slider-content */
  z-index: 2;
}

.cd-radial-slider-wrapper svg {
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.cd-radial-slider-content {
  position: absolute;
  z-index: 3;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  visibility: hidden;
  -webkit-transform: translateZ(0);
          transform: translateZ(0);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.cd-radial-slider-content .wrapper {
  /* vertically center its content */
  display: table;
  height: 100%;
  width: 100%;
}
.cd-radial-slider-content .wrapper > div {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
  padding: 0 17%;
  color: #ffffff;
}
.cd-radial-slider-content h2 {
  font-size: 2rem;
  font-family: "Vollkorn", serif;
}
.cd-radial-slider-content p {
  font-size: 1.4rem;
  margin: .6em auto .8em;
}
.cd-radial-slider-content .cd-btn {
  display: inline-block;
  padding: 1em;
  border: 2px solid #ffffff;
  color: #ffffff;
  text-transform: uppercase;
  letter-spacing: .1em;
  font-size: 1.2rem;
  font-weight: bold;
}
.visible .cd-radial-slider-content {
  visibility: visible;
  opacity: 1;
}
.prev-slide .cd-radial-slider-content {
  -webkit-transform: translateX(50px);
      -ms-transform: translateX(50px);
          transform: translateX(50px);
}
.next-slide .cd-radial-slider-content {
  -webkit-transform: translateX(-50px);
      -ms-transform: translateX(-50px);
          transform: translateX(-50px);
}
.content-reveal-left .cd-radial-slider-content, .content-reveal-right .cd-radial-slider-content {
  /* animate slide content when entering the viewport */
  -webkit-animation-delay: .1s;
          animation-delay: .1s;
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
  opacity: 1;
  visibility: visible;
}
.content-hide-left .cd-radial-slider-content, .content-hide-right .cd-radial-slider-content {
  /* animate slide content when leaving the viewport */
  opacity: 0;
  visibility: hidden;
}
.content-reveal-left .cd-radial-slider-content, .content-reveal-right .cd-radial-slider-content, .content-hide-left .cd-radial-slider-content, .content-hide-right .cd-radial-slider-content {
  -webkit-animation-duration: .4s;
          animation-duration: .4s;
}
.content-reveal-left .cd-radial-slider-content {
  -webkit-animation-name: cd-reveal-left;
          animation-name: cd-reveal-left;
}
.content-reveal-right .cd-radial-slider-content {
  -webkit-animation-name: cd-reveal-right;
          animation-name: cd-reveal-right;
}
.content-hide-left .cd-radial-slider-content {
  -webkit-animation-name: cd-hide-left;
          animation-name: cd-hide-left;
}
.content-hide-right .cd-radial-slider-content {
  -webkit-animation-name: cd-hide-right;
          animation-name: cd-hide-right;
}
@media only screen and (min-width: 1100px) {
  .cd-radial-slider-content h2 {
    font-size: 4.4rem;
  }
  .cd-radial-slider-content p {
    font-size: 2rem;
    margin: 1.2em auto 1.6em;
  }
  .cd-radial-slider-content .cd-btn {
    font-size: 1.6rem;
    -webkit-transition: background .2s, color .2s;
    transition: background .2s, color .2s;
  }
  .cd-radial-slider-content .cd-btn:hover {
    background: #ffffff;
    color: #0a0b15;
  }
}

.cd-round-mask {
  /* wrapper for the svg mask elements */
  top: 0;
  left: 0;
  pointer-events: none;
  z-index: 0;
}

/* -------------------------------- 

Slider navigation

-------------------------------- */
.cd-radial-slider-navigation li {
  position: absolute;
  z-index: 6;
  right: 3.58%;
  top: 42.5%;
  height: 15%;
  width: 8.57%;
}
.cd-radial-slider-navigation li a {
  display: block;
  height: 100%;
  /* replace text with image */
  overflow: hidden;
  text-indent: 100%;
  white-space: nowrap;
  color: transparent;
  -webkit-transition: -webkit-transform .2s;
  transition: -webkit-transform .2s;
  transition: transform .2s;
  transition: transform .2s, -webkit-transform .2s;
}
.cd-radial-slider-navigation li a::after {
  /* arrow icon */
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  bottom: auto;
  right: auto;
  -webkit-transform: translateX(-50%) translateY(-50%);
      -ms-transform: translateX(-50%) translateY(-50%);
          transform: translateX(-50%) translateY(-50%);
  height: 16px;
  width: 16px;
  background: url(https://codyhouse.co/demo/radial-svg-slider/img/cd-icon-arrows.svg) no-repeat 0 0;
}
.cd-radial-slider-navigation li a:hover {
  -webkit-transform: scale(1.1);
      -ms-transform: scale(1.1);
          transform: scale(1.1);
}
.cd-radial-slider-navigation li:last-of-type {
  left: 3.58%;
  right: auto;
}
.cd-radial-slider-navigation li:last-of-type a::after {
  background-position: -16px 0;
}
@media only screen and (min-width: 900px) {
  .cd-radial-slider-navigation li a::after {
    height: 48px;
    width: 48px;
    background-image: url(https://codyhouse.co/demo/radial-svg-slider/img/cd-icon-arrows.svg);
  }
  .cd-radial-slider-navigation li:last-of-type a::after {
    background-position: -48px 0;
  }
}

/* -------------------------------- 

Keyframes

-------------------------------- */
@-webkit-keyframes cd-reveal-left {
  0% {
    opacity: 0;
    visibility: hidden;
    -webkit-transform: translateX(50px);
            transform: translateX(50px);
  }
  100% {
    opacity: 1;
    visibility: visible;
    -webkit-transform: translateX(0px);
            transform: translateX(0px);
  }
}
@keyframes cd-reveal-left {
  0% {
    opacity: 0;
    visibility: hidden;
    -webkit-transform: translateX(50px);
            transform: translateX(50px);
  }
  100% {
    opacity: 1;
    visibility: visible;
    -webkit-transform: translateX(0px);
            transform: translateX(0px);
  }
}
@-webkit-keyframes cd-reveal-right {
  0% {
    opacity: 0;
    visibility: hidden;
    -webkit-transform: translateX(-50px);
            transform: translateX(-50px);
  }
  100% {
    opacity: 1;
    visibility: visible;
    -webkit-transform: translateX(0px);
            transform: translateX(0px);
  }
}
@keyframes cd-reveal-right {
  0% {
    opacity: 0;
    visibility: hidden;
    -webkit-transform: translateX(-50px);
            transform: translateX(-50px);
  }
  100% {
    opacity: 1;
    visibility: visible;
    -webkit-transform: translateX(0px);
            transform: translateX(0px);
  }
}
@-webkit-keyframes cd-hide-left {
  0% {
    opacity: 1;
    visibility: visible;
    -webkit-transform: translateX(0px);
            transform: translateX(0px);
  }
  100% {
    opacity: 0;
    visibility: hidden;
    -webkit-transform: translateX(-50px);
            transform: translateX(-50px);
  }
}
@keyframes cd-hide-left {
  0% {
    opacity: 1;
    visibility: visible;
    -webkit-transform: translateX(0px);
            transform: translateX(0px);
  }
  100% {
    opacity: 0;
    visibility: hidden;
    -webkit-transform: translateX(-50px);
            transform: translateX(-50px);
  }
}
@-webkit-keyframes cd-hide-right {
  0% {
    opacity: 1;
    visibility: visible;
    -webkit-transform: translateX(0px);
            transform: translateX(0px);
  }
  100% {
    opacity: 0;
    visibility: hidden;
    -webkit-transform: translateX(50px);
            transform: translateX(50px);
  }
}
@keyframes cd-hide-right {
  0% {
    opacity: 1;
    visibility: visible;
    -webkit-transform: translateX(0px);
            transform: translateX(0px);
  }
  100% {
    opacity: 0;
    visibility: hidden;
    -webkit-transform: translateX(50px);
            transform: translateX(50px);
  }
}
@-webkit-keyframes cd-clicked {
  0%, 100% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  50% {
    -webkit-transform: scale(0.9);
            transform: scale(0.9);
  }
}
@keyframes cd-clicked {
  0%, 100% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  50% {
    -webkit-transform: scale(0.9);
            transform: scale(0.9);
  }
}

            
          
!
            
              jQuery(document).ready(function($){
	//set slider animation parameters
	var duration = 400,
		epsilon = (1000 / 60 / duration) / 4,
		customMinaAnimation = bezier(.42,.03,.77,.63, epsilon);

	//define a radialSlider object
	var radialSlider = function(element) {
		this.element = element;
		this.slider = this.element.find('.cd-radial-slider');
		this.slides = this.slider.children('li');
		this.slidesNumber = this.slides.length;
		this.visibleIndex = 0;
		this.nextVisible = 1;
		this.prevVisible = this.slidesNumber - 1;
		this.navigation = this.element.find('.cd-radial-slider-navigation');
		this.animating = false;
		this.mask = this.element.find('.cd-round-mask');
		this.leftMask = this.mask.find('mask').eq(0);
		this.rightMask = this.mask.find('mask').eq(1);
		this.bindEvents();
	} 

	radialSlider.prototype.bindEvents = function() {
		var self = this;

		//update visible slide when clicking the navigation round elements
		this.navigation.on('click', function(event){
			if( !self.animating ) {
				self.animating =  true;
				event.preventDefault();
				var direction = ( $(event.target).hasClass('next') ) ? 'next' : 'prev';
				//update radialSlider index properties
				self.updateIndexes(direction);
				//show new slide
				self.updateSlides(direction);
			}
		});
	}

	radialSlider.prototype.updateIndexes = function(direction) {
		if(  direction == 'next' ) {
			this.prevVisible = this.visibleIndex;
			this.visibleIndex = this.nextVisible;
			this.nextVisible = ( this.nextVisible + 1 < this.slidesNumber) ? this.nextVisible + 1 : 0;
		} else {
			this.nextVisible = this.visibleIndex;
			this.visibleIndex = this.prevVisible;
			this.prevVisible = ( this.prevVisible > 0 ) ? this.prevVisible - 1 : this.slidesNumber - 1;
		}
	}

	radialSlider.prototype.updateSlides = function(direction) {
		var self = this;

		//store the clipPath elements which need to be animated/updated
		var clipPathVisible = Snap('#'+this.slides.eq(this.visibleIndex).find('circle').attr('id')),
			clipPathPrev = Snap('#'+this.slides.eq(this.prevVisible).find('circle').attr('id')),
			clipPathNext = Snap('#'+this.slides.eq(this.nextVisible).find('circle').attr('id'));

		var radius1 = this.slider.data('radius1'),
			radius2 = this.slider.data('radius2'),
			centerx = ( direction == 'next' ) ? this.slider.data('centerx2') : this.slider.data('centerx1');

		this.slides.eq(this.visibleIndex).addClass('is-animating').removeClass('next-slide prev-slide');

		if( direction == 'next' ) {
			//animate slide content
			this.slides.eq(this.visibleIndex).addClass('content-reveal-left');
			this.slides.eq(this.prevVisible).addClass('content-hide-left');
			//mask slide image to reveal navigation round element
			this.slides.eq(this.visibleIndex).find('image').attr('style', 'mask: url(#'+this.leftMask.attr('id')+')');

			//animate slider navigation round element
			clipPathNext.attr({
				'r': radius1,
				'cx': self.slider.data('centerx2'),
			});
			this.slides.eq(this.nextVisible).addClass('next-slide move-up');
			this.slides.filter('.prev-slide').addClass('scale-down');
		} else {
			//animate slide content
			this.slides.eq(this.visibleIndex).addClass('content-reveal-right');
			this.slides.eq(this.nextVisible).addClass('content-hide-right');
			//mask slide image to reveal navigation round element
			this.slides.eq(this.visibleIndex).find('image').attr('style', 'mask: url(#'+this.rightMask.attr('id')+')');

			//animate slider navigation round element
			clipPathPrev.attr({
				'r': radius1,
				'cx': this.slider.data('centerx1'),
			});
			this.slides.eq(this.prevVisible).addClass('prev-slide move-up');
			this.slides.filter('.next-slide').addClass('scale-down');
		}

		// reveal new slide image - animate clipPath element
		clipPathVisible.attr({
			'r': radius1,
			'cx': centerx,
		}).animate({'r': radius2}, duration, customMinaAnimation, function(){

			if( direction == 'next' ) {
				self.slides.filter('.prev-slide').removeClass('prev-slide scale-down');
				clipPathPrev.attr({
					'r': radius1,
					'cx': self.slider.data('centerx1'),
				});
				self.slides.eq(self.prevVisible).removeClass('visible').addClass('prev-slide');
			} else {
				self.slides.filter('.next-slide').removeClass('next-slide scale-down');
				clipPathNext.attr({
					'r': radius1,
					'cx': self.slider.data('centerx2'),
				});
				self.slides.eq(self.nextVisible).removeClass('visible').addClass('next-slide');
			}
			self.slides.eq(self.visibleIndex).removeClass('is-animating').addClass('visible').find('image').removeAttr('style');
			self.slides.filter('.move-up').removeClass('move-up');

			setTimeout(function(){
				self.slides.eq(self.visibleIndex).removeClass('content-reveal-left content-reveal-right');
				self.slides.eq(self.prevVisible).removeClass('content-hide-left content-hide-right');
				self.slides.eq(self.nextVisible).removeClass('content-hide-left content-hide-right');
				self.animating =  false;
			}, 100);
		});	
	}

	//initialize the radial slider
	$('.cd-radial-slider-wrapper').each(function(){
		new radialSlider($(this));
	});

	/*
		convert a cubic bezier value to a custom mina easing
		http://stackoverflow.com/questions/25265197/how-to-convert-a-cubic-bezier-value-to-a-custom-mina-easing-snap-svg
	*/
	function bezier(x1, y1, x2, y2, epsilon){
		//https://github.com/arian/cubic-bezier
		var curveX = function(t){
			var v = 1 - t;
			return 3 * v * v * t * x1 + 3 * v * t * t * x2 + t * t * t;
		};

		var curveY = function(t){
			var v = 1 - t;
			return 3 * v * v * t * y1 + 3 * v * t * t * y2 + t * t * t;
		};

		var derivativeCurveX = function(t){
			var v = 1 - t;
			return 3 * (2 * (t - 1) * t + v * v) * x1 + 3 * (- t * t * t + 2 * v * t) * x2;
		};

		return function(t){

			var x = t, t0, t1, t2, x2, d2, i;

			// First try a few iterations of Newton's method -- normally very fast.
			for (t2 = x, i = 0; i < 8; i++){
				x2 = curveX(t2) - x;
				if (Math.abs(x2) < epsilon) return curveY(t2);
				d2 = derivativeCurveX(t2);
				if (Math.abs(d2) < 1e-6) break;
				t2 = t2 - x2 / d2;
			}

			t0 = 0, t1 = 1, t2 = x;

			if (t2 < t0) return curveY(t0);
			if (t2 > t1) return curveY(t1);

			// Fallback to the bisection method for reliability.
			while (t0 < t1){
				x2 = curveX(t2);
				if (Math.abs(x2 - x) < epsilon) return curveY(t2);
				if (x > x2) t0 = t2;
				else t1 = t2;
				t2 = (t1 - t0) * .5 + t0;
			}

			// Failure
			return curveY(t2);

		};
	};
});
            
          
!
999px
🕑 One or more of the npm packages you are using needs to be built. You're the first person to ever need it! We're building it right now and your preview will start updating again when it's ready.

Console