<div class="ease-visualizer" data-ease="power2.out"></div>

body {
  background-color:#fafafa;
  overflow: hidden;
  margin: 0;
}



  .custom_edit_bg {
    fill:#303030;
  }
  #custom_edit_container {
    top:0;
    left:0;
    overflow:visible;
  }
.ease-instructions {
  position: absolute;
  top:38px;
  right: 13px;
  width: 245px;
  color: #777;
  border-bottom: 1px solid #444;
  padding-bottom: 10px;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
}
.ease-instructions p {
  font-size: 13px;
  margin: 0;
  padding: 2px 0;
}
.ease-visualizer .ease-instructions h2 {
  font-size: 17px;
  color: #aaa;
  margin:0;
  padding: 2px 0;
  position: static;
}

.ease_visualizer {
    padding: 2rem!important;
  display: flex;
}


.ease_visualizer, .ease_visualizer * {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
.ease_visualizer textarea:focus, .ease_visualizer input:focus, .ease_visualizer button:focus, .ease_visualizer select:focus {
  outline: 0;
}
.ease_menu {
  display: flex;
  align-items:flex-start;
  justify-content: center;
  flex-direction: column;
  position: relative;
  font-size: 1.75em;
  z-index:500;
  min-width: 200px;
  padding: 0 1.5rem;
  height: auto;
}
.ease_visualizer h2 {
  position: absolute;
  top: 24px;
  font-size:36px;
  color: #999;
  font-weight: 400;
  padding: 0;
  margin: 0;
}
.ease_menu .ease_class:hover {
  color: #888;
  background-color: #333;
}
.ease_menu .ease_class {
  position: relative;
  padding: 2px 6px;
  border-radius: 4px;
  float: left;
  clear: both;
  cursor: pointer;
}
.ease_menu .ease_type {
  position: absolute;
  display: none;
}
.ease_menu .ease_type_quick_label {
  color: #ddd;
}
.ease_menu .ease_type_section {
  clear:both;
  position: relative;
}
.ease_visualizer {
  width: 100%;
  max-width: 840px;
  padding: 0;
  padding-top: 70px;
  margin-left: auto;
  margin-right: auto;
  color: #999999;
  font-size: 13px;
  font-family: "Signika Negative", sans-serif;
  position: relative;
}

.ease_visualizer {
  visibility: hidden;
}
.ease_visualizer.enabled {
  visibility: visible;
}

.ease_visualizer a {
  color: #61AC27;
}

.ease_visualizer .go {
  width: 244px;
  z-index: 5;
}
.ease_visualizer .command {
  position: relative;
  padding: 14px;
  margin-top: 30px;
  font-size: 18px;
  line-height: 26px;
  font-family: consolas, menlo, monaco, "courier new", monospace;
  z-index: 2;
  background-color: rgba(255,255,255,0.025);
  color: #F1F2F3;
  border-radius: 6px;
}
.ease_visualizer.light .command {
  background-color: rgba(0,0,0,0.855);
}

.ease_visualizer .command pre {
  display: inline;
}

@media screen and (min-width: 950px) {
  .ease_visualizer .command div {
    display: inline;
  }
  .ease_visualizer .command pre {
    display: none;
  }
}

.ease_visualizer .command .easetype_rough .rough_easeclass,
.ease_visualizer .command .easetype_rough .rough_easetype {
  display: inline;
}

.ease_visualizer .command .number,
.ease_visualizer .command .number + .display {
  color: #FACD22;
}
.ease_visualizer .command .class,
.ease_visualizer .command .class + .display,
.ease_visualizer .command .main_ease_class_label,
.ease_visualizer .command .rough_ease_class_label {
  color: #72a5d8;
}
.ease_visualizer .command .string,
.ease_visualizer .command .string + .display,
.ease_visualizer .command .rough_taper_label {
  color: #EC7600;
}
.ease_visualizer .command .comment {
  color: #999999;
  display: block !important;
  line-height: 24px;
  margin: 5px 0;
}
.ease_visualizer .command .comment div {
  display: block;
}
.ease_visualizer .command .comment .clubgreensock {
  color: #F1F2F3;
  padding: 14px 6px 6px 6px;
  margin-top: 14px;
  border-top: 1px solid #61AC27;
}
.ease_visualizer .command .comment .clubgreensock:before {
  content: "";
  float: left;
  width: 62px;
  height: 74px;
  margin-top: -8px;
  margin-left: -6px;
  margin-right: 14px;
  background: url(https://www.greensock.com/forums/uploads/packages-0558826001407339622.png) 0 0 no-repeat;
  background-size: 62px;
}
.ease_visualizer .command .keyword,
.ease_visualizer .command .slowmo_yoyo_label,
.ease_visualizer .command .rough_randomize_label,
.ease_visualizer .command .rough_clamp_label {
  color: #93C763;
}

.ease_visualizer label {
  position: relative;
  text-decoration: underline;
  cursor: pointer;
}
.ease_visualizer label.locked {
  text-decoration: none;
  cursor: auto;
}

.ease_visualizer label input,
.ease_visualizer label select {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
  font: inherit;
  font-size: inherit;
  line-height: inherit;
  height: 100%;
  width: 100%;
  color: #000000 !important;
  opacity: 0;
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  cursor: pointer;
}
.ease_visualizer label input + .display {
  position: relative;
  z-index: 2;
}
.ease_visualizer label input:focus + .display,
.ease_visualizer label select:focus + .display {
  -webkit-box-shadow: 0 0 0 2px #222222, 0 0 1px 3px #FFFFFF;
  -moz-box-shadow: 0 0 0 2px #222222, 0 0 1px 3px #FFFFFF;
  box-shadow: 0 0 0 2px #222222, 0 0 1px 3px #FFFFFF;
  outline: none;
}

.ease_visualizer  span[contenteditable] {
  text-decoration: underline;
  cursor: pointer;
}
.ease_visualizer  span[contenteditable]:focus {
  -webkit-box-shadow: 0 0 0 2px #222222, 0 0 1px 3px #FFFFFF;
  -moz-box-shadow: 0 0 0 2px #222222, 0 0 1px 3px #FFFFFF;
  box-shadow: 0 0 0 2px #222222, 0 0 1px 3px #FFFFFF;
  outline: none;
}
.ease_visualizer .easeclass {
  direction: rtl;
}


.ease_visualizer .controls {
  /* margin: 10px 0; */
  position: relative;
  z-index: 5;
}
@media screen and (min-width: 720px) {
  .ease_visualizer .controls {
    /* margin-top: -16px; */
  }
}
.ease_visualizer button {
  border: none;
  padding: 0 24px;
  cursor: pointer;
  display: inline-block;
  line-height: 44px;
  font-size:18px;
  border-radius: 6px;
  text-transform: uppercase;
  float: right;
  position:relative;
  color: #F1F2F3;
  background-color: #414141;
  background-image: -webkit-linear-gradient(top, #575757, #414141);
  background-image: -moz-linear-gradient(top, #575757, #414141);
  background-image: -ms-linear-gradient(top, #575757, #414141);
  background-image: -o-linear-gradient(top, #575757, #414141);
  background-image: linear-gradient(to bottom, #575757, #414141);
  text-shadow: 0px 1px 0px #414141;
  -webkit-box-shadow: 0px 1px 0px #414141;
  -moz-box-shadow: 0px 1px 0px #414141;
  box-shadow: 0px 1px 0px #414141;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}
.ease_visualizer .controls button:hover {
  background-color: #57a818;
  background-image: -webkit-linear-gradient(top, #57a818, #4d9916);
  background-image: -moz-linear-gradient(top, #57a818, #4d9916);
  background-image: -ms-linear-gradient(top, #57a818, #4d9916);
  background-image: -o-linear-gradient(top, #57a818, #4d9916);
  background-image: linear-gradient(to bottom, #57a818, #4d9916);
  text-shadow: 0px 1px 0px #32610e;
  -webkit-box-shadow: 0px 1px 0px #32610e;
  -moz-box-shadow: 0px 1px 0px #32610e;
  box-shadow: 0px 1px 0px #32610e;
}

.ease_visualizer .visualization {
  max-width: 100%;
  height: auto;
  /* margin-left: auto; */
  /* margin-right: auto; */
  z-index: 100;
}

.ease_visualizer .fluidwrap {
  height: 0;
  width: 100%;
  padding-bottom: 100%;
}

.ease_visualizer .graph {
  margin: 0 auto;
  position: relative;
  width: 100%;
  max-width: 530px;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}
.ease_visualizer.editMode.mousedown .graph {
  z-index: 100;
}
.ease_visualizer .graph .graphwrap {
  position: absolute;
  top: 0;
  right: 5.660377358490566%;
  bottom: 5.660377358490566%;
  left: 0;
}
  .ease_visualizer .graph .graph_wrap_inner {
    pointer-events: none;
    overflow:visible;
  }

.ease_visualizer .graph .svg {
  position: absolute;
  z-index: 1;
  width: 100%;
  height: 100%;
  cursor: default;
}
.ease_visualizer .graph .svg svg {
  overflow: visible;
}
.ease_visualizer .graph .svg .graph_bg {
  fill: #303030;
}
.ease_visualizer.light .graph .svg .graph_bg {
  fill: #DDDDDD;
}
.ease_visualizer .graph .svg .graph_linear {
  fill: none;
  stroke: #1d1d1d;
  stroke-width: 1.5px;
}
.ease_visualizer.light .graph .svg .graph_linear {
  stroke: #EDEDED;
}
.ease_visualizer .graph .svg .graph_line {
  fill: none;
  stroke: rgba(255,255,255,0.07);
  stroke-width: 1.5px;
}
.ease_visualizer.light .graph .svg .graph_line {
  stroke: rgba(0,0,0,0.1);
}
.ease_visualizer .graph .svg .graph_path, .ease_visualizer .graph .svg .ease_template {
  fill: none;
  stroke: #666666;
  stroke-width: 2px;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.ease_visualizer .graph .svg .ease_template {
  stroke: #F1F2F3;
}
.ease_visualizer .graph .svg .ease_template_bg {
  fill: transparent;
}

.ease_visualizer.light .graph .svg .graph_path, .ease_visualizer.light .graph .svg .ease_template {
  stroke: #AAAAAA;
}
.ease_visualizer.light .graph .svg .ease_template {
  stroke: #CCC;
}
.ease_visualizer .graph .svg .graph_path_reveal {
  fill: none;
  stroke: #F1F2F3;
  stroke-width: 0.4px;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.ease_visualizer.light .graph .svg .graph_path_reveal {
  stroke: #3C3C3C;
}

.ease_visualizer .graph .svg .control,
.ease_visualizer .graph .svg .point {
  cursor: pointer;
}
.ease_visualizer .graph .svg .point,
.ease_visualizer .graph .svg .control {
  fill: #61AC27;
  stroke: transparent;
  stroke-width: 2px;
}
.ease_visualizer .graph .svg .point {
  fill: #61AC27;
}
.ease_visualizer .graph .svg .line {
  stroke: #61AC27;
  stroke-width: 0.3px;
  stroke-dasharray: 1,0.6;
}
.ease_visualizer .graph .svg .outside .point,
.ease_visualizer .graph .svg .outside .control {
  fill: #E81146;
}
.ease_visualizer .graph .svg .outside .line {
  stroke: #E81146;
}
.ease_visualizer .graph .svg .mouse_catch {
  fill: transparent;
}
.ease_visualizer .graph .custom_edit {
  visibility: hidden;
}
.ease_visualizer.editMode .graph .custom_edit {
  visibility: visible;
}
.ease_visualizer .graph .progress {
  position: absolute;
  height: 100%;
  width: 100%;
  z-index: 0;
}
.ease_visualizer .graph .progress_bar .label {
  position: absolute;
  line-height: 30px;
}
.ease_visualizer .graph .progress_bar.horizontal .label {
  bottom: 1px;
  width: 100%;
  text-align: center;
}
.ease_visualizer .graph .progress_bar.vertical .label {
  top: 50%;
  left: 2px;
  margin-left: -50%;
  transform-origin: top left;
  -webkit-transform: matrix(0, 1, -1, 0, 0, 0);
  -moz-transform: matrix(0, 1, -1, 0, 0, 0);
  transform: matrix(0, 1, -1, 0, 0, 0);
}
.ease_visualizer .graph .progress_bar {
  position: absolute;
  background-color: #2f2f2f;
}
.ease_visualizer.light .graph .progress_bar {
  background-color: #DDDDDD;
}
.ease_visualizer .graph .progress_bar.horizontal {
  height: 2px;
  width: auto;
  top: auto;
  bottom: 0;
  left: 0;
  right: 5.660377358490566%;
}
.ease_visualizer .graph .progress_bar.vertical {
  width: 2px;
  top: 0;
  bottom: 5.660377358490566%;
  left: auto;
  right: 0;
}
.ease_visualizer .graph .progress_fill {
  height: 100%;
  width: 100%;
  background-color: #999999;
}
.ease_visualizer.light .graph .progress_fill {
  background-color: #777777;
}
.ease_visualizer .graph .progress_bar.vertical .progress_fill {
  background-color: #61AC27;
}
.ease_visualizer .graph .progress_bar.vertical .progress_joint {
  position: absolute;
  width: 10px;
  height: 10px;
  margin-left: -4px;
  margin-top: -5px;
  border-radius: 50%;
  background-color: rgb(136, 206, 2);
}
@media screen and (min-width: 560px) {
  .ease_visualizer .graph .progress_bar.vertical .progress_joint {
    width: 25px;
    height: 25px;
    margin-left: -11px;
    margin-top: -12px;
  }
}
.ease_visualizer .graph .progress_number {
  position: absolute;
  bottom: 0;
  right: -9px;
  line-height: 0.35em;
  text-align: right;
}

@media screen and (max-width: 430px) {
  .ease_visualizer .graph .progress_bar .label {
    display: none;
  }
  .ease_visualizer .graph .progress_number {
    display: none;
  }
}


.ease_visualizer .clock {
  position: relative;
  width: 100%;
  max-width: 530px;
  border-radius: 50%;

  background-color: #303030;
}
.ease_visualizer.light .clock {
  background-color: #DDDDDD;
}
.ease_visualizer .clock_ease,
.ease_visualizer .clock_linear,
.ease_visualizer .clock_guide {
  position: absolute;
  left: 50%;
  width: 2px;
  margin-left: -1px;
}
.ease_visualizer .clock_linear {
  top: 15%;
  height: 35%;
  width: 2px;
  margin-left: -1px;
  border-radius: 2px 2px 0 0;
  background-color: #999999;
}
.ease_visualizer.light .clock_linear {
  background-color: #3C3C3C;
}
.ease_visualizer .clock_ease {
  height: 50%;
  border-radius: 2px 2px 0 0;
  background-color: #61AC27;
}
.ease_visualizer .clock_guide {
  top: 0;
  height: 50%;
  background-color: #1d1d1d;
  width: 1px;
  margin-left: -0.5px;
}
.ease_visualizer.light .clock_guide {
  background-color: #EDEDED;
}
.ease_visualizer .clock_joint,
.ease_visualizer .clock_ease .clock_joint{
  position: absolute;
  width: 10px;
  height: 10px;
  top: 50%;
  left: 50%;
  margin-left: -5px;
  margin-top: -5px;
  border-radius: 50%;
  background-color: #999999;
}
.ease_visualizer.light .clock_joint {
  background-color: #3C3C3C;
}
.ease_visualizer .clock_ease .clock_joint {
  top: -1px;
  background-color: #61AC27;
}
@media screen and (min-width: 560px) {
  .ease_visualizer .clock_ease .clock_joint {
    width: 16px;
    height: 16px;
    margin-left: -8px;
    margin-top: -8px;
  }
}


.ease_visualizer .box {
  position: relative;
  width: 100%;
  max-width: 530px;
  background-color: #303030;
}
.ease_visualizer.light .box {
  background-color: #DDDDDD;
}
.ease_visualizer .box .boxwrap {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
.ease_visualizer .boxbox {
  position: relative;
  width: 20%;
  white-space: pre;
  text-align: center;
  margin-bottom: .8%;
  border-radius: 6px;
  height: 16%;
  line-height: 24px;
  padding: 0 0.5em;
  color: #ccc;
  background-color: #666666;
  font-size: 16px;
  line-height: 80px;
}
.ease_visualizer .boxbox.box_custom {
  background-color: rgb(136, 206, 2);
}


.ease_visualizer .ease_selector {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 6;
  background-color: #222;
  overflow: auto;
  padding: 4px;
}
.ease_visualizer .ease_selector .ease_selector_wrap {
  width: 100%;
  height: auto;
  margin-left: auto;
  margin-right: auto;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  background-color: #222222;
}
.ease_visualizer .ease_selector .ease_class {
  overflow: hidden;
  float: left;
  width: 49.5%;
  margin: 0 1% 0 0;
  position: relative;
}
.ease_visualizer .ease_selector .ease_class:nth-child(even) {
  margin: 0;
}
.ease_visualizer.light .ease_selector .ease_class {
  border-color: #DDDDDD;
}
@media screen and (max-width: 500px) {
  .ease_visualizer .ease_selector .ease_class {
    clear: left;
    width: 100%;
    margin-right: 0;
  }
}
.ease_visualizer .ease_selector input {
  display: none;
}
.ease_visualizer .ease_selector .ease_type,
.ease_visualizer .ease_selector button {
  font-family: consolas, menlo, monaco, "courier new", monospace;
  font-weight: normal;
  font-size: 12px;
  text-align: center;
  color: #FFFFFF;
}
.ease_visualizer .ease_selector .ease_type {
  position: absolute;
  z-index: 2;
  width: 100%;
  font-size: 22px;
  line-height: 34px;
  color: #fff;
}
.ease_visualizer .ease_selector button {
  border: none;
  margin: 1px 0 0 0;
  padding: 0;
  background: url(https://greensock.com/wp-content/themes/greensock/includes/EaseVisualizer/EaseVisualizer-dark.gif) 0 0 no-repeat;
  background-size: 700%;
  font-weight: bold;
  color: #3C3C3C;
  float: left;
  height: 0;
  width: 33.33333%;
  padding-bottom: 33.33333%;
  padding-top: 28px;
  position: relative;
}
.ease_visualizer .ease_selector button span {
  color: #999;
  background-color: #111;
}
.ease_visualizer .ease_selector .other button {
  width: 25%;
}
.ease_visualizer .ease_selector button:hover {
  -webkit-box-shadow: 0 0 5px #4298ED inset;
  -moz-box-shadow: 0 0 5px #4298ED inset;
  box-shadow: 0 0 5px #4298ED inset;
}
.ease_visualizer .ease_selector button:focus,
.ease_visualizer .ease_selector button:active {
  outline: 0;
  -webkit-box-shadow: 0 0 8px #4298ED inset;
  -moz-box-shadow: 0 0 8px #4298ED inset;
  box-shadow: 0 0 8px #4298ED inset;
}
.ease_visualizer .ease_selector button.Back.easeOut {
  background-position: 0% 0%;
}
.ease_visualizer .ease_selector button.Back.easeInOut {
  background-position: 16.6% 0%;
}
.ease_visualizer .ease_selector button.Back.easeIn {
  background-position: 33.3% 0%;
}

.ease_visualizer .ease_selector button.Bounce.easeOut {
  background-position: 50% 0%;
}
.ease_visualizer .ease_selector button.Bounce.easeInOut {
  background-position: 66.6% 0%;
}
.ease_visualizer .ease_selector button.Bounce.easeIn {
  background-position: 83.3% 0%;
}

.ease_visualizer .ease_selector button.Circ.easeOut {
  background-position: 100% 0%;
}
.ease_visualizer .ease_selector button.Circ.easeInOut {
  background-position: 0% 24.1%;
}
.ease_visualizer .ease_selector button.Circ.easeIn {
  background-position: 16.6% 24.1%;
}

.ease_visualizer .ease_selector button.Elastic.easeOut {
  background-position: 33.3% 24.1%;
}
.ease_visualizer .ease_selector button.Elastic.easeInOut {
  background-position: 50% 24.1%;
}
.ease_visualizer .ease_selector button.Elastic.easeIn {
  background-position: 66.6% 24.1%;
}

.ease_visualizer .ease_selector button.Expo.easeOut {
  background-position: 83.3% 24.1%;
}
.ease_visualizer .ease_selector button.Expo.easeInOut {
  background-position: 100% 24.1%;
}
.ease_visualizer .ease_selector button.Expo.easeIn {
  background-position: 0% 48.2%;
}

.ease_visualizer .ease_selector button.Power0.easeOut {
  background-position: 16.6% 48.2%;
}
.ease_visualizer .ease_selector button.Power0.easeInOut {
  background-position: 16.6% 48.2%;
}
.ease_visualizer .ease_selector button.Power0.easeIn {
  background-position: 16.6% 48.2%;
}

.ease_visualizer .ease_selector button.Power1.easeOut {
  background-position: 33.3% 48.2%;
}
.ease_visualizer .ease_selector button.Power1.easeInOut {
  background-position: 50% 48.2%;
}
.ease_visualizer .ease_selector button.Power1.easeIn {
  background-position: 66.6% 48.2%;
}

.ease_visualizer .ease_selector button.Power2.easeOut {
  background-position: 83.3% 48.2%;
}
.ease_visualizer .ease_selector button.Power2.easeInOut {
  background-position: 100% 48.2%;
}
.ease_visualizer .ease_selector button.Power2.easeIn {
  background-position: 0% 72.4%;
}

.ease_visualizer .ease_selector button.Power3.easeOut {
  background-position: 16.6% 72.4%;
}
.ease_visualizer .ease_selector button.Power3.easeInOut {
  background-position: 33.3% 72.4%;
}
.ease_visualizer .ease_selector button.Power3.easeIn {
  background-position: 50% 72.4%;
}

.ease_visualizer .ease_selector button.Power4.easeOut {
  background-position: 66.6% 72.4%;
}
.ease_visualizer .ease_selector button.Power4.easeInOut {
  background-position: 83.3% 72.4%;
}
.ease_visualizer .ease_selector button.Power4.easeIn {
  background-position: 100% 72.4%;
}

.ease_visualizer .ease_selector button.Sine.easeOut {
  background-position: 0% 96.5%;
}
.ease_visualizer .ease_selector button.Sine.easeInOut {
  background-position: 16.6% 96.5%;
}
.ease_visualizer .ease_selector button.Sine.easeIn {
  background-position: 33.3% 96.5%;
}

.ease_visualizer .ease_selector button.CustomEase {
  background-position: 50% 96.5%;
}
.ease_visualizer .ease_selector .other button.CustomEase {
  background-position: 50% 99%;
}
.ease_visualizer .ease_selector button.RoughEase {
  background-position: 66.6% 96.5%;
}
.ease_visualizer .ease_selector .other button.RoughEase {
  background-position: 66.6% 99%;
}
.ease_visualizer .ease_selector button.SlowMo {
  background-position: 83.3% 96.5%;
}
.ease_visualizer .ease_selector .other button.SlowMo {
  background-position: 83.3% 99%;
}
.ease_visualizer .ease_selector button.SteppedEase {
  background-position: 100% 96.5%;
}
.ease_visualizer .ease_selector .other button.SteppedEase {
  background-position: 100% 99%;
}

.command {
  display: none;
}

// Copyright 2016 GreenSock Inc. See https://greensock.com/gsap/
 gsap.registerPlugin(MorphSVGPlugin)

;(function ($) {

  var htmlLink = `<body>

<div class="visualization graph">
  <div class="fluidwrap">
    <div class="graphwrap">
      <svg class="svg graph_wrap_inner" version="1.1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 500 500" preserveAspectRatio="xMidYMid meet" xml:space="preserve">
        <defs>
          <clipPath id="graph_path">
            <rect x="0" y="-1" width="500" height="1000"></rect>
          </clipPath>
          <clipPath id="graph_path_reveal">
            <rect x="0" y="-200" width="0" height="1000"></rect>
          </clipPath>
        </defs>
        <svg>
          <rect class="graph_bg" x="0" y="-150" width="500" height="650" rx="0.2" ry="0.2" clip-path="url(#graph_path)"></rect>
          <g class="graph_lines" clip-path="url(#graph_path)"></g>
          <line class="graph_linear" x1="0" y1="500" x2="500" y2="0"></line>
          <line class="graph_line graph_linex" x1="0" y1="499.5" x2="500" y2="499.5"></line>
          <line class="graph_line graph_liney" x1="0.5" y1="0" x2="0.5" y2="500"></line>
          <path class="graph_path" d="M1,499 L499,501" clip-path="url(#graph_path)"></path>

          <path class="graph_path_reveal" d="M1,499 L499,501" clip-path="url(#graph_path_reveal)"></path>
        </svg>
      </svg>
    <svg class="svg" id="custom_edit_container" version="1.1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 500 500" preserveAspectRatio="xMidYMid meet" xml:space="preserve">
      <g>
      <rect width="500" height="500" class="ease_template_bg"></rect>
      <path class="ease_template" d=""></path>
      </g>
    </svg>
    </div>

    <div class="progress">
      <div class="progress_bar horizontal"><div class="progress_fill"></div><div class="label">progress</div></div>
      <div class="progress_bar vertical"><div class="progress_fill"></div><div class="progress_joint"></div><div class="label">value</div></div>
      <div class="progress_number">0.00</div>
    </div>
  </div>
</div>

<div class="visualization clock" style="display: none;">
  <div class="fluidwrap">
    <div class="clock_guide"></div>
    <div class="clock_linear"></div>
    <div class="clock_ease"><div class="clock_joint"></div></div>
    <div class="clock_joint"></div>
  </div>
</div>

<div class="visualization box" style="display: none;">
  <div class="fluidwrap">
    <div class="boxwrap">
      <div class="boxbox box_power0">Power0</div>
      <div class="boxbox box_power1">Power1</div>
      <div class="boxbox box_power2">Power2</div>
      <div class="boxbox box_power3">Power3</div>
      <div class="boxbox box_power4">Power4</div>
      <div class="boxbox box_custom"></div>
    </div>
  </div>
</div>
<div>
<div class="ease_menu">
<p>Change the type of ease...</p>
  <div class="ease_type_section">power2.<select class="ease_type_quick_select editable" data-type="ease_type_quick">
    <option value="in">in</option>
    <option value="inOut">inOut</option>
    <option value="out" selected="selected">out</option>
  </select></div>
</div>
</div>


<div class="command">
  <div class="comment">// click and modify the underlined values</div>

  <div><span class="class">gsap</span>.to(<select class="target_select" data-type="target">
      <option value="graph" selected="selected">graph</option>
      <option value="clock">clock</option>
      <option value="box">box</option>
    </select>, <select class="number duration editable" data-type="duration">
      <option value="0.5">0.5&nbsp;&nbsp;&nbsp;&nbsp;</option>
      <option value="1">1</option>
      <option value="2.5" selected="selected">2.5</option>
      <option value="5">5</option>
      <option value="10">10</option>
    </select>, { </div>

  <div><!-- easeline --><pre>  </pre>ease: <select class="main_ease_class_select" data-type="main_ease_class">
      <option value="Back">Back</option>
      <option value="Bounce">Bounce</option>
      <option value="Circ">Circ</option>
      <option value="Elastic">Elastic</option>
      <option value="Expo">Expo</option>
      <option value="Power0">Linear/Power0</option>
      <option value="Power1">Quad/Power1</option>
      <option value="Power2" selected="selected">Cubic/Power2</option>
      <option value="Power3">Quart/Power3</option>
      <option value="Power4">Strong/Quint/Power4</option>
      <option value="Sine">Sine</option>
      <option value="RoughEase">RoughEase</option>
      <option value="SlowMo">SlowMo</option>
      <option value="SteppedEase">SteppedEase</option>
      <option value="CustomEase">Custom</option>
    </select>.<!-- start basic --><span class="main_ease_type basic_ease elastic_ease back_ease"><select class="basic_ease_type_select elastic_ease back_ease" data-type="main_basic_ease_type">
        <option value="in">in</option>
        <option value="inOut">inOut</option>
        <option value="out" selected="selected">out</option>
      </select><span class="main_ease_type basic_ease">,</span></span><!-- start linear --><span class="main_ease_type linear_ease">easeNone,</span><!-- start rough --><span class="main_ease_type rough_ease">ease.config({ <div><pre>    </pre>template: <select class="rough_ease_class_select" data-type="rough_ease_class">
      <option value="Back">Back</option>
      <option value="Bounce">Bounce</option>
      <option value="Circ">Circ</option>
      <option value="Elastic">Elastic</option>
      <option value="Expo">Expo</option>
      <option value="Power0" selected="selected">Linear/Power0</option>
      <option value="Power1">Quad/Power1</option>
      <option value="Power2">Cubic/Power2</option>
      <option value="Power3">Quart/Power3</option>
      <option value="Power4">Strong/Quint/Power4</option>
      <option value="Sine">Sine</option>
    </select>.<span class="rough_ease_type rough_basic_ease"><select class="rough_ease_type_select" data-type="rough_basic_ease_type">
        <option value="in">in</option>
        <option value="inOut">inOut</option>
        <option value="out" selected="selected">out</option>
      </select></span><span class="rough_ease_type rough_linear_ease">easeNone</span>, </div><div><pre>    </pre>strength: <select class="number rough_strength editable" data-type="rough_strength">
      <option value="0.2">0.2&nbsp;&nbsp;&nbsp;&nbsp;</option>
      <option value="0.5">0.5</option>
      <option value="1" selected="selected">1</option>
      <option value="1.5">1.5</option>
      <option value="2">2</option>
    </select>, </div><div><pre>    </pre>points: <select class="number rough_points editable" data-type="rough_points">
      <option value="10">10&nbsp;&nbsp;&nbsp;&nbsp;</option>
      <option value="20" selected="selected">20</option>
      <option value="50">50</option>
      <option value="100">100</option>
      <option value="200">200</option>
    </select>, </div><div><pre>    </pre>taper: <select class="rough_taper_select" data-type="rough_taper">
        <option value="&quot;none&quot;" selected="selected">none</option>
        <option value="&quot;in&quot;">in</option>
        <option value="&quot;out&quot;">out</option>
        <option value="&quot;both&quot;">both</option>
      </select>, </div><div><pre>    </pre>randomize: <input type="checkbox" checked="checked" class="rough_randomize_checkbox" data-type="rough_randomize">, </div><div><pre>    </pre>clamp: <input type="checkbox" class="rough_clamp_checkbox" data-type="rough_clamp"></div><div><pre>  </pre>}),</div></span><!-- start slowmo --><span class="main_ease_type slowmo_ease">ease.config(<select class="number slowmo_ratio editable" data-type="slowmo_ratio">
      <option value="0.1">0.1&nbsp;&nbsp;&nbsp;&nbsp;</option>
      <option value="0.3">0.3</option>
      <option value="0.5">0.5</option>
      <option value="0.7" selected="selected">0.7</option>
      <option value="0.9">0.9</option>
    </select>, <select class="number slowmo_power editable" data-type="slowmo_power">
      <option value="0.1">0.1&nbsp;&nbsp;&nbsp;&nbsp;</option>
      <option value="0.4">0.4</option>
      <option value="0.7" selected="selected">0.7</option>
      <option value="1">1</option>
      <option value="2">2</option>
    </select>, <input type="checkbox" class="slowmo_yoyo_checkbox" data-type="slowmo_yoyo">),</span><!-- start stepped --><span class="main_ease_type stepped_ease">config(<select class="number stepped_steps editable" data-type="stepped_steps">
      <option value="2">2&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</option>
      <option value="6">6</option>
      <option value="12" selected="selected">12</option>
      <option value="20">20</option>
      <option value="40">40</option>
    </select>),</span><!-- start Elastic --><span class="main_ease_type elastic_ease">.config(<select class="number elastic_amplitude editable" data-type="elastic_amplitude">
    <option value="1" selected="selected">1&nbsp;&nbsp;&nbsp;&nbsp;</option>
    <option value="1.2">1.2</option>
    <option value="1.5">1.5</option>
    <option value="1.75">1.75</option>
    <option value="2">2</option>
    <option value="2.5">2.5</option>
  </select>, <select class="number elastic_period editable" data-type="elastic_period">
    <option value="0.1">0.1&nbsp;&nbsp;&nbsp;&nbsp;</option>
    <option value="0.2">0.2</option>
    <option value="0.3" selected="selected">0.3</option>
    <option value="0.4">0.4</option>
    <option value="0.5">0.5</option>
    <option value="0.75">0.75</option>
    <option value="1">1</option>
  </select>),</span><!-- start Back --><span class="main_ease_type back_ease">.config(<select class="number back_amount editable" data-type="back_amount">
    <option value="1">1&nbsp;&nbsp;&nbsp;&nbsp;</option>
    <option value="1.4">1.4</option>
    <option value="1.7" selected="selected">1.7</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
  </select>),</span><!-- start custom --><span class="main_ease_type custom_ease">create("custom", "<span contenteditable="true" spellcheck="true" class="string custom_path">"0"</span>"),</span> <!-- close ease line --></div>

  <div class="prop prop_graph"><pre>  </pre>y: <span class="number">-500</span> </div>
  <div class="prop prop_clock"><pre>  </pre>rotation: <span class="number">360</span> </div>
  <div class="prop prop_box"><pre>  </pre>x: <span class="string">"400%"</span> </div>

  <div>});</div>
  <div class="comment descriptions">
    <div class="Back"></div>
    <div class="Bounce"></div>
    <div class="Circ"></div>
    <div class="Elastic"></div>
    <div class="Expo"></div>
    <div class="Power0"></div>
    <div class="Power1"></div>
    <div class="Power2"></div>
    <div class="Power3"></div>
    <div class="Power4"></div>
    <div class="RoughEase"></div>
    <div class="Sine"></div>
    <div class="SlowMo"></div>
    <div class="SteppedEase"></div>
    <div class="Custom"></div>
  </div>
</div></body>`;
  var id = 0;
  var timeline;
  var $menuEases;
  var highlightTween;
  var isLoaded;
  var _numbersExp = /(?:(-)?\d*\.?\d*(?:e[\-+]?\d+)?)[0-9]/ig;
  var _rawPathDataExp = /\bd=["']+.*["'][\s\/>]/i;

  var defaults = {
    startEase:  "Power2",
    lightTheme: false,
    lockEase:   false
  };

  var customStrings = {
    "Power2.out":   "M0,0,C0.126,0.382,0.282,0.674,0.44,0.822,0.632,1.002,0.818,1.001,1,1",
    "Power2.in":    "M0,0,C0.366,0,0.438,0.069,0.575,0.19,0.802,0.39,1,1,1,1",
    "Power2.inOut": "M0,0,C0.173,0,0.242,0.036,0.322,0.13,0.401,0.223,0.449,0.367,0.502,0.506,0.546,0.622,0.62,0.824,0.726,0.916,0.799,0.98,0.869,1,1,1",
  };

  var customSVG = {
    "Power2.out":   "M0,500 C63,309 141,163 220,89 316,-1 409,-0.499 500,0",
    "Power2.in":    "M0,500 C183,500 219,465.5 287.5,405 401,305 500,0 500,0",
    "Power2.inOut": "M0,500 C86.5,500 121,482 161,435 200.5,388.5 224.5,316.5 251,247 273,189 310,88 363,42 399.5,10 434.5,0 500,0",
  };

  var _createSVG = function (type, container, attributes, insertBefore) {
    var element = document.createElementNS("http://www.w3.org/2000/svg", type),
      reg = /([a-z])([A-Z])/g,
      p;
    for (p in attributes) {
      element.setAttributeNS(null, p.replace(reg, "$1-$2").toLowerCase(), attributes[p]);
    }
    if (insertBefore) {
      container.parentNode.insertBefore(element, container);
    } else {
      container.appendChild(element);
    }
    return element;
  };

  var methods = {
    init:    function (options) {
      var settings = $.extend({}, defaults, options);

      return this.each(function (index) {
        var vis = $(this);
        var data = vis.data('easeVisualizer');
        if (!data) {
          vis.data('easeVisualizer', {
            id:              id++,
            settings:        settings,
            active:          true,
            graphTL:         null,
            currentVis:      "graph",
            currentDuration: 2.5,
            currentEaseName: "Power2",
            currentEase:     null,
            editMode:        false
          });

          loaded(htmlLink, vis);
        }
      });
    },
    destroy: function () {
      return this.each(function (index) {
        var vis = $(this);
        var data = vis.data("easeVisualizer");

        if (data.graphTL) data.graphTL.kill();
        if (data.clockTL) data.clockTL.kill();
        if (data.boxTL) data.boxTL.kill();

        vis.find(".go").off("click.easeVisualizer");
        vis.find("select, input").off("change.easeVisualizer");
        vis.find(".editable").off("change.easeVisualizer");
        vis.find(".main_ease_class_label").off("mousedown.easeVisualizer");

        vis.html("").removeData().removeClass("light ease_visualizer enabled").css("margin-top", "");
      });
    }
  };

  function loaded(html, vis) {
    var data = vis.data("easeVisualizer"),
      startingEaseName, easeMenuWidth,
      i, lastIndex, customEase;

    if (data.settings.lightTheme === true) {
      vis.addClass("light");
    }

    vis.addClass("ease_visualizer").html(html);
    vis.addClass("enabled");

    //$(document.head).append("<link rel='stylesheet' href='" + cssLink + "' media='screen' type='text/css' />");

    easeMenuWidth = (vis.innerWidth() - 595) || 244;
    $menuEases = $(".ease_menu .ease_class");
    $(".ease_menu").on("click", ".ease_class", {vis: vis}, onMenuEaseClick);

    var main_ease_class_select = vis.find(".main_ease_class_select");

    // run button
    vis.find(".go").css("width", easeMenuWidth + "px").on("click.easeVisualizer", {vis: vis}, onClickRun);

    // select options
    vis.find("select, input").on("change.easeVisualizer", {vis: vis}, selectChange).each(function () {
      var t = $(this);
      t.wrap("<label class='" + t.data('type') + "_label'></label>").after("<span class='display'></span>");
    }).trigger("change");

    vis.find(".editable").attr("tabindex", "-1").on("change.easeVisualizer", function (e) {
      $(this).siblings(".display").focus();
    }).siblings(".display").attr("contenteditable", "true").attr("spellcheck", "true");

    // ease selector
    if (data.settings.lockEase !== true) {
      vis.find(".ease_selector").css({display: "none", opacity: 0}).on("click", "button", {vis: vis}).trigger("change");
      vis.find(".main_ease_class_label").on("mousedown.easeVisualizer", {vis: vis}, showVisSelect);
    } else {
      vis.find(".ease_selector").css({display: "none", opacity: 0});
      main_ease_class_select.css("display", "none").parent().addClass('locked');
    }

    vis.find(".main_ease_class_select").css("visibility", "hidden");

    var prependElement = vis.find(".graph_lines")[0];
    for (i = 1; i < 13; i++) {
      _createSVG("line", prependElement, {x1: i * 50, x2: i * 50, y1: -150, y2: 500, stroke: "#222", strokeWidth: 1, vectorEffect: "non-scaling-stroke"});
      if (i !== 3) {
        _createSVG("line", prependElement, {x1: 0, x2: 500, y1: i * 50 - 150, y2: i * 50 - 150, stroke:"#222", strokeWidth: 1, vectorEffect: "non-scaling-stroke"});
      }
    }
    _createSVG("line", prependElement, {x1: 0, x2: 500, y1: 0, y2: 0, stroke: "#777", strokeWidth: 1, vectorEffect: "non-scaling-stroke"});

    isLoaded = true;

    //look in the URL for a CustomEase
    i = window.location.href.indexOf("CustomEase=");
    if (i !== -1) {
      lastIndex = window.location.href.indexOf("&", i);
      customEase = decodeURI((lastIndex !== -1) ? window.location.href.substr(i+11, lastIndex - i - 11) : window.location.href.substr(i+11));
      data.settings.startEase = "CustomEase";
      vis.find(".custom_path").text(customEase);
    } else if (data.settings.startEase === "CustomEase") { //in case "CustomEase" is selected initially but no actual ease data passed into the URL, we must first default to an ease to trace, so we use Power2.out.
      main_ease_class_select.find('option[value="Power2"]').prop("selected", true).trigger("change");
    }

    data.settings.startEase = data.settings.startEase || "Power2.out";
    startingEaseName = parseEaseClass(data.settings.startEase, true);
    highlightMenuEase(startingEaseName);
    main_ease_class_select.find('option[value="' + parseEaseClass(data.settings.startEase) + '"]').prop("selected", true).trigger("change");

    if (timeline) {
      timeline.delay(1.5);
    }

  }

  function parseEaseClass(name, short) {
    name = name.split(".")[0];
  }


  function showVisSelect(e) {
    e.preventDefault();
    e.stopPropagation();

    var vis = e.data.vis;

    window.showBasicOverlay(vis.find(".ease_selector").focus(), function () {
      hideVisSelect(vis);
    });

    return false;
  }

  function hideVisSelect(vis) {
    vis.find(".main_ease_class_label").css("visibility", "visible");
    window.hideBasicOverlay();
  }

  function onMenuEaseClick(e) {
    if (highlightMenuEase(this.textContent)) { //returns true if the ease was already selected.
      if (timeline) {
        timeline.restart();
      }
      return;
    }
    e.data.vis.find(".main_ease_class_select").find('option[value="' + parseEaseClass(this.textContent) + '"]').prop("selected", true).trigger("change");
  }

  function highlightMenuEase(name) {
    if (highlightTween) { //a simple, performant way to unhighlight the previous ease.
      if (highlightTween.target.textContent !== name) { //if it's the same target, it means the user clicked on the already-highlighted ease, so do nothing.
        gsap.to(highlightTween.target, 0.2, {backgroundColor: "rgba(0,0,0,0)", color: "#626262", clearProps: "backgroundColor,color"});
      } else {
        return true;
      }
    }
    var i = $menuEases.length;
    while (--i > -1) {
      if ($menuEases[i].textContent === name) {
        highlightTween = gsap.to($menuEases[i], 0.2, {backgroundColor: "#88CE02", color: "black"});
      }
    }
    $menuEases.siblings(".ease_type_section").css("visibility", (name === "Rough" || name === "Stepped" || name === "SlowMo" || name === "Power0" || name === "Custom") ? "hidden" : "visible");
  }


  function selectChange(e) {
    var vis = e.data.vis;
    var element = $(this);
    var isSelect = element.is("select");
    var type = element.data("type");
    var value = isSelect ? element.val() : element.prop("checked");
    
    
    if (isSelect) {
      var display = element.siblings(".display").text(value);
      //var width = display.width();
      //if (width !== 0) element.width(width);
    } else {
      element.siblings(".display").text(value ? "true" : "false");
    }

    switch (type) {
      case "ease_type_quick":
        vis.find(".basic_ease_type_select").find('option[value="' + value + '"]').prop("selected", true).trigger('change');
        return;
        break;
        
      case "target":
        var all = vis.find(".visualization");
        var allprops = vis.find(".prop");
        switch (value) {
          case "graph":
            showOnly(vis.find(".graph"), all);
            showOnly(vis.find(".prop_graph"), allprops);
            break;
        }
        break;

      case "main_ease_class":
        var all = vis.find(".main_ease_type");
        var data = vis.data("easeVisualizer");
        data.editMode = false;
        switch (value) {
          case "Power0":
            showOnly(vis.find(".linear_ease"), all);
            break;

          case "RoughEase":
            showOnly(vis.find(".rough_ease"), all);
            break;

          case "SlowMo":
            showOnly(vis.find(".slowmo_ease"), all);
            break;

          case "SteppedEase":
            showOnly(vis.find(".stepped_ease"), all);
            break;

          case "Elastic":
            showOnly(vis.find(".elastic_ease"), all);
            break;

          case "Back":
            showOnly(vis.find(".back_ease"), all);
            break;

          case "CustomEase":
            showOnly(vis.find(".custom_ease"), all);
            data.editMode = true;
            break;

          default:
            showOnly(vis.find(".basic_ease"), all);
        }

        var descriptions = vis.find(".descriptions").children();
        showOnly(descriptions.filter("." + value), descriptions);

        vis.toggleClass("editMode", data.editMode);
        break;

      case "rough_ease_class":
        var all = vis.find(".rough_ease_type");
        switch (value) {
          case "Power0":
            showOnly(vis.find(".rough_linear_ease"), all);
            break;

          default:
            showOnly(vis.find(".rough_basic_ease"), all);
        }
        break;

      case "main_basic_ease_type":
        vis.find(".ease_type_quick_select").find('option[value="' + value + '"]').prop("selected", true);
        vis.find(".ease_type_quick_select").siblings(".display").text(value);
        break;

      case "rough_basic_ease_type":
        break;

      case "rough_taper":
      case "rough_randomize":
      case "rough_clamp":
      case "slowmo_yoyo":
        break;
    }

    refreshTween(vis);
    run(null, vis);

  }


  function refreshTween(vis) {
    var d = parseFloat(vis.find(".duration").siblings(".display").text());
    var previousEaseName = vis.data("easeVisualizer").currentEaseName;
    var type = vis.find(".basic_ease_type_select").val();
    if (isNaN(d) || d === 0) d = 2.5;
    vis.find(".duration").siblings(".display").text(d);

    var ease, c = vis.find(".main_ease_class_select").val(), t = vis.find(".target_select").val();
 
    
    ease = `power2.${type}`

    var data = vis.data("easeVisualizer");
    data.currentVis = t;
    data.currentDuration = d;
    data.currentEaseName = c;
    data.currentEaseType = type;
    data.currentEase = ease;

    if (!(c === "CustomEase" && previousEaseName !== "CustomEase") && isLoaded) {
      createGraph(vis);
    }
  }


  function onClickRun(e, vis) {
    var vis = e.data.vis;
    if (vis && vis.custom) { //if in custom editing mode, create the ease now
      refreshTween(vis);
      run(e, vis);
    }
    if (timeline) {
      timeline.restart();
    }
  }

  function run(e, vis) {
    if (typeof vis === "undefined") {
      vis = e.data.vis;
      // rebuild each run
      refreshTween(vis);
    }
    var data = vis.data("easeVisualizer");
    var graphTL = data.graphTL;

    if (graphTL) graphTL.progress(0).kill();
    switch (data.currentVis) {
      case "graph":
        runGraphVis(vis);
        break;
    }
  }


  function runGraphVis(vis) {
    var data = vis.data("easeVisualizer");
    var d = data.currentDuration;
    var ease = data.currentEase;
    var offset = 0.2;
    var graphTL = timeline = gsap.timeline({delay: 0.1}); //delay slightly to give the CPU time to breathe after all the setup (avoid jank)
    graphTL.add("start", offset);

    graphTL.fromTo(vis.find(".graph_line"), 0.0001, {autoAlpha: 0}, {autoAlpha: 1}, "start");

    graphTL.fromTo(vis.find("#graph_path_reveal rect"), d, {attr: {width: 0}}, {attr: {width: 500}, ease: Linear.easeNone}, "start");
    graphTL.fromTo(vis.find(".graph_liney"), d, {attr: {x1: 0, x2: 0}}, {attr: {x1: 500, x2: 500}, ease: Linear.easeNone}, "start");
    graphTL.fromTo(vis.find(".progress_joint"), d, {top: "100%"}, {top: "0%", ease: ease}, "start");
    graphTL.fromTo(vis.find(".graph_linex"), d, {attr: {y1: 500, y2: 500}}, {attr: {y1: 0, y2: 0}, ease: ease}, "start");

    graphTL.fromTo(vis.find(".horizontal .progress_fill"), d, {scaleX: 0, transformOrigin: "left center"}, {ease: Linear.easeNone, scaleX: 1}, "start");
    graphTL.fromTo(vis.find(".vertical .progress_fill"), d, {scaleY: 0, transformOrigin: "left bottom"}, {ease: ease, scaleY: 1}, "start");

    graphTL.to(vis.find(".graph_line"), 0.07, {autoAlpha: 0});

    data.graphTL = graphTL;
    return graphTL;
  }

  function createGraph(vis) {
    var name = vis.find(".main_ease_class_select").val(),
      data = vis.data("easeVisualizer"),
      precision = (name === "SteppedEase" || name === "Bounce" || name === "Elastic") ? 3 : 1,
      ease = data.currentEase || 'none';
      let mainEase = data.currentEaseName,
      fullEaseName = mainEase + "." + data.currentEaseType,
      customString = ((fullEaseName !== "Elastic.out" && mainEase !== "Back") || (fullEaseName === "Elastic.out" && ease._p1 === 1 && ease._p3 === 0.075) || (mainEase === "Back" && ease._p1 === 1.7)) ? customStrings[fullEaseName] : null, //note: we created a simplified version of Elastic.out and the Back eases, but only with the default configuration so if there is any customization, we should just do the auto-tracing.
      $customPath = vis.find(".custom_path"),
      path, simplified;
    if (customString) {
      $customPath.text(customString);
      path = customSVG[fullEaseName];
    } else {
      path = CustomEase.getSVGData(ease, {width: 500, height: 500, precision: precision});
      simplified = ease.rawBezier ? path : PathEditor.simplifySVG(path, {tolerance: (precision === 1) ? 3 : 1, cornerThreshold: (mainEase === "Bounce") ? 130 : (mainEase === "SteppedEase" || mainEase === "RoughEase") ? 180 : 0});
      $customPath.text(CustomEase.getSVGData(new CustomEase("custom", simplified, {height: 500}), {width: 1, height: -1, y: 1, precision: precision}));
    }
    if (isLoaded) {
      gsap.to(".graph_path", 0.4, {morphSVG: `${path}`});
      vis.find(".graph_path_reveal").attr("d", path);
    }
  }

  function showOnly(target, set) {
    gsap.set(target, {display: ""});
    gsap.set(set.not(target), {display: "none"});
  }

  $.fn.easeVisualizer = function (method) {
    if (methods[method]) {
      return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
    } else if (typeof method === 'object' || !method) {
      return methods.init.apply(this, arguments);
    } else {
      $.error('Method ' + method + ' does not exist');
    }
  };
})(jQuery);


$(".ease-visualizer").each(function () {
  var $this = $(this);
  $this.css({padding: "70px 20px 20px", borderRadius: "10px", color: "#999", backgroundColor: "#222"}).html("<p style='padding:250px 0 300px; font-size:30px; text-align:center;'>Loading...</p>").easeVisualizer({startEase: $this.data("ease") || "Power2.out", lightTheme: $this.data("light")});
});