JSFiddle - React, Tailwind, and code Playground

by karthick6891

HTML

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.2/TweenMax.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.6/ScrollMagic.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.6/plugins/animation.gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.6/plugins/debug.addIndicators.min.js"></script>
<script src="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,700"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<div id="content-wrapper">
  <div class="scrollContent">
    <section class="demo">
      <div class="spacer s7"></div>
      <div id="trigger1" class="spacer s0"></div>
      <div class="spacer s10"></div>
      <div id="trigger_menu" class="spacer s0"></div>
      <div class="spacer s10"></div>
    </section>
  </div>
  <section class="about">
    <h2>Hello</h2>
    <div class="about_content">
    <svg height="400" width="450">
<path id="char_r"  style="stroke-linecap: round; stroke-linejoin: round;" fill="none" stroke="#000000" stroke-width="5" d="M 100 350 l 150 -300" stroke="red" stroke-width="3" fill="none" />
 
</svg>
     
    </div>
    <div><i class="fas fa-arrow-circle-down fa-3x"></i></div>
  </section>
</div>

CSS

::-webkit-scrollbar {
  display: none;
}

html,
body {
  height: 100%;
  scrollbar-width: none;
  /* Firefox */
  background-color: #86D8FF;
}

body {
  font-family: 'Source Sans Pro', Helvetica, Arial, sans-serif;
  font-size: 12px;
  color: #FFF;
  overscroll-behavior: none;
  /* prevent inner bouncing */
}

#content-wrapper {
  width: 100%;
  height: 100%;
}

.scrollContent {
  overflow-y: scroll;
  width: 100%;
  height: auto;
  overscroll-behavior: auto;
}

.spacer {
  text-align: center;
  min-height: 100px;
}

.spacer.s0 {
  min-height: 1px;
}

.spacer.s1 {
  min-height: 100px;
}

.spacer.s2 {
  min-height: 200px;
}

.spacer.s3 {
  min-height: 300px;
}

.spacer.s4 {
  min-height: 400px;
}

.spacer.s5 {
  min-height: 500px;
}

.spacer.s6 {
  min-height: 600px;
}

.spacer.s7 {
  min-height: 700px;
}

.spacer.s8 {
  min-height: 800px;
}

.spacer.s9 {
  min-height: 900px;
}

.spacer.s10 {
  min-height: 1000px;
}

.spacer.s_viewport {
  min-height: 100%;
}

.demo {
  text-align: center;
}

.about {
  position: fixed;
  top: 200px;
  width: 100%;
  height: auto;
  margin: auto;
  text-align: center;
}

.about h2 {
  font-size: 30px;
}

.about .about_content {
  font-size: 14px;
  text-align: center;
}

.about .about_content svg {
  width: 263px;
  height: 125px;
}

.content_pane {
  color: #000;
  position: fixed;
  background-color: #FFF;
  height: 100%;
  right: -100%;
  top: 0;
  width: 70%;
  padding: 15px;
  -webkit-box-shadow: -5px 0 10px rgba(0, 0, 0, 0.2);
  -moz-box-shadow: -5px 0 10px rgba(0, 0, 0, 0.2);
  box-shadow: -5px 0 10px rgba(0, 0, 0, 0.2);
}

.content_pane h2 {
  font-weight: 700;
}

.content_pane .banner {
  width: 100%;
  height: 250px;
  background: url(../images/roadroad.jpg) no-repeat;
  background-position: center 40%;
  background-size: cover;
}

.content_pane .main_content {
  font-weight: 300;
  font-size: 1.2em;
}

JavaScript

var controller = new ScrollMagic.Controller();

// About Scene
var $charR = $("path#char_r");


pathPrepare($charR);



var myAnimation = TweenMax.to($charR, 0.2, {
    strokeDashoffset: 0,
    ease: Linear.easeNone
})


document.addEventListener('click',function(){
	if (myAnimation.reversed()) {
    myAnimation.play();
  } else {
      myAnimation.reverse();
  }
})
  
function pathPrepare($el) {
  var lineLength = $el[0].getTotalLength();
  $el.css("stroke-dasharray", lineLength);
  $el.css("stroke-dashoffset", lineLength);
}