JSFiddle - React, Tailwind, and code Playground

by Juan Kristoffer Sanio

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/2.2.0/anime.min.js"></script>
<div class="container">
    <div class="vp">
      <div class="hero-container">
        <section class="ss1">
          <div class="bg-container"></div>
          <div class="img-container">
            <img src="//sgwmscog.org/wp-content/uploads/direct/test1-2440.jpg">
          </div>
        </section>
      </div>
    <div class="imgh" style="display:none;">
      <div class="bgholder"></div>
      <div class="bgholder-two"></div>
      <div class="lrcontainer">
        <div class="llbtn"> &lt; </div>
        <div class="rlbtn"> &gt; </div>
      </div>
      <div class="titleb">
        <div class="innerb inner"></div>
        <div class="innerb2 inner"></div>
      </div>
      <div class="titlea">
        <div class="innera inner">
          <label>01</label>
          World Mission Society Church of God, Singapore
        </div>
        <div class="innera2 inner">
          <label>02</label>
          The Queen's Award for Voluntary Service
        </div>
      </div>
    </div>
    <div class="bg1-container">
      
      
      <div class="our-beliefs">
        <h1>Our Beliefs
        <span class="extra">Bible<br><span>Truth</span></span></h1>
        <article>
          <h1> God the Mother </h1>
          <p>The Mother of our spirits as testified in the bible.</p>
          <a href="">Learn More</a>
        </article>
        <article>
          <h1> Second Coming Christ </h1>
          <p>Jesus Christ come again in the flesh in this age.</p>
          <a href="">Learn More</a>
        </article>
        <article>
          <h1> Holy Sabbath Day </h1>
          <p>God's appointed day of worship given to the disciples</p>
          <a href="">Learn More</a>
        </article>
        <article>
          <h1> New Covenant Passover </h1>
          <p>The feast of Life that Jesus established for our salvation</p>
          <a href="">Learn More</a>
        </article>
...

SCSS

@import url('//fonts.googleapis.com/css?family=Poppins');

body { background: grey; font-family: Poppins; }
$offset: 0.3;
$btmoffset: 0;

.hero-container {
  position: relative;
  height: 20rem;
  .ss1 {
    width: calc(100% - 20px);
    display: block;
    overflow: auto;
    height: 20rem;
    margin: 10px;
    box-sizing: unset;
    background: #FFF;
    box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.2);
    img {
      object-fit: cover;
      object-position: 50% 50%;
      height: 100%;
      width: 100%;
    }
  }
  .bg-container {
    background: linear-gradient(135deg, #285bd3 0%,#49e5c1 100%);
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    clip-path: url(#clip1);
  }
  .img-container {
    position: absolute;
    top: 0;
    left: 0;
    height: 20rem;
      clip-path: url(#clip4);
  }
}

.vp {
  width: 18rem; height: auto;
  margin: 1rem auto;
  background: url(//www.designbolts.com/wp-content/uploads/2012/12/simple-pattern-white-seamless-website-background.jpg);
  box-shadow: 0 0 100px #333;
  overflow: hidden;
}
.imgh {
  height: calc(18rem * 1.2);
  position: relative;
  .lrcontainer {
    position: absolute;
    bottom: -3rem;
  }
  .bgholder, .bgholder-two {
    position: absolute;
    background: #333 url(//sgwmscog.org/wp-content/uploads/direct/test1-2440.jpg);
    background-size: cover;
    background-position: 50% 50%;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    transition: all 0.55s ease-in-out 0.15s;
  }
  .bgholder-two {
    top: 0;
    left: -100%;    
    background: #D1C4E9 url(//sgwmscog.org/wp-content/uploads/Awards_Queen.png) no-repeat;
    background-size: 80% auto;
    background-position: 50% 50%;
  }
  
  .inner {
    position: absolute;
    font-family: sans-serif;
    letter-spacing: 0.05rem;
    color:#fff;
    box-sizing: border-box;   
    font-size: 0.9em;
    text-align: left;
    overflow: hidden; 
    transition: all 0.4s ease-in-out 0.1s;
  }
  .titleb, titlea {...

JavaScript

setTimeout(function() {
	console.log(1);
	anime({
  	targets: '#clip4 path',
    duration: 1500,
    elasticity: 300,
    d: 'M 121.287 55.785 C 120.5 42.555 117.37 29.845 108 18.69 C 98.39 7.345 85.39 1.192 71.972 0.163 C 58.555 -0.868 44.72 3.225 33.44 12.37 C -9.19 47 -3.73 121.16 9.85 168.07 C 13.738 182.047 19.454 195.449 26.85 207.93 C 32.24 216.81 40.42 231.89 51.78 233.19 C 64.2 234.61 80.68 226.43 92.53 223 C 106.397 219 120.187 214.767 133.9 210.3 C 181.12 194.92 253.02 153.01 230.12 93.13 C 222.25 72.55 203.72 63.86 182.52 64.86 C 156.79 66 139.01 79.7 120.52 96 C 120.52 96 120.52 96 120.52 96 C 120.52 82.765 122.075 69.015 121.287 55.785'
  });
}, 500);

var anim_in = function() {
  $('.bgholder-two').css({
    left: 0
  });
  $('.innera2, .innerb2').css({
    transform: 'translateX(0%)'
  });
  setTimeout(anim_out, 1500);
};

var anim_out = function() {
  $('.bgholder-two').css({
    left: ''
  });
  $('.innera2, .innerb2').css({
    transform: ''
  });
};

setInterval(anim_in, 3000);

var volunteer_service_container = document.querySelector('#volunteer_service_container');
var volunteer_service_container_visible = false;
$(window).on('resize scroll', throttle(function(){
	if(isElementInViewport(volunteer_service_container)) {
    if (volunteer_service_container_visible != true) 
    	toggleDiv(true);
  } else {
    if (volunteer_service_container_visible == true) 
    	toggleDiv(false);
  }
}, 250));

function toggleDiv(b) {
  volunteer_service_container_visible = b;
	if (!!b) {
  	console.log('element-show');
    showVolunteerService();
  } else
  	console.log('element-hide');
}

function showVolunteerService() {
//volunteer_service_img
	$('#volunteer_title').css({
  	borderBottomWidth: '250px'
  });
	$('.volunteer_service_img, article.volunteer_service, article.volunteer_service a').css({
  	transform: 'translateX(0)'
  });
  setTimeout(function(){
  	$('.volunteer_service_img').css({
    	animation: 'floatabout 15s linear infinite'
    });
  },...