JSFiddle - React, Tailwind, and code Playground

by trishantpahwa

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.2/TweenMax.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/ScrollMagic.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/plugins/jquery.ScrollMagic.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/plugins/debug.addIndicators.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/plugins/animation.gsap.min.js"></script>
<div id="center_line"></div>

		<div id="years">
			<h3 id="1980">The 1980's</h3>
		</div>

		<div id="container">

			<div id="set_trigger">
				<div id="pulse_ball">
					<div id="ball"></div>
					<div id="pulse"></div>
				</div>
			</div>

			<div class="section" id="section1">
				<div class="left">
					<div class="timeline-item">
						<div class="event">
							<img src="http://image.fg-a.com/sports/large-basketball.gif">
							<br />
							<p><b class="year">1980</b> - Event #1</p>
						</div>
						<div class="event_line">
							<img src="https://i.imgur.com/mPiWBtf.png">
						</div>
						<div class="point"></div>
					</div>
				</div>
				<div class="right">
					<div class="timeline-item">
						<div class="event">
							<img src="http://image.fg-a.com/sports/large-basketball.gif">
							<br />
							<p><b class="year">1980</b> - Event #2</p>
						</div>
						<div class="event_line">
							<img src="https://i.imgur.com/XYqLaEF.png">
						</div>
						<div class="point"></div>
					</div>
					<div class="timeline-item">
						<div class="event">
							<p><b class="year">1980</b> - Event #3</p>
						</div>
						<div class="event_line">
							<img src="https://i.imgur.com/XYqLaEF.png">
						</div>
						<div class="point"></div>
					</div>
					<div class="timeline-item">
						<div class="event">
							<p><b...

CSS

body {
	margin: 0;
	padding: 0;
	background: #203351; /* Old browsers */
}
#center_line {
	width: 3px;
	background: #dbdbdb;
	margin: 0 auto;
	position: fixed;
	z-index: 0;
}
#container {
	width: 75%;
	margin: 0 auto;
	padding-bottom: 750px;
	background: url('img/bg_texture.png');
	background-size: contain;
}
@media screen and (max-width: 768px) {
	#container {
		width: 100%;
		margin: 0 auto;
	}
}
.left {
	float: left;
	position: relative;
	width: 50%;
}
.right {
	float: right;
	position: relative;
	width: 50%;
}
.timeline-item .point {
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	border-radius: 50%;
	height: 20px;
	width: 20px;
	background: #dbdbdb;
	position: relative;
	display: block;
	top: 5px;
}
	.left .timeline-item .point {
		left: calc(100% - 10px);
	}
	.right .timeline-item .point {
		left: calc(0% + -10px);
	}
.clear {
	clear: both;
}
.timeline-item {
	margin-bottom: 200px;
	min-height: 125px;
}
.timeline-item p {
	color: #FF9849;
	font-family: "Gotham-Light";
	font-size: 18px;
}
.timeline-item .event b {
	font-family: "Gotham-Book";
}
b.year {
	color: #fff;
}
.right .timeline-item {
	text-align: right;
	float: right;
	clear: both;
}
.left .timeline-item {
    text-align: left;
    float: left;
    clear: both;
}
#set_trigger {
	height: 750px;
}
#pulse {
  width: 10px;
  height: 10px;
  margin: 0 auto;
  border: 5px solid #00abe8;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
  background-color: #00abe8;
  z-index: 10;
  position: relative;
  top: -37px;
}

#ball {
  border: 10px solid #00abe8;
  background: transparent;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
  height: 35px;
  width: 35px;
  margin: 0 auto;
  -webkit-animation: pulse 2s ease-out;
  -moz-animation: pulse 2s ease-out;
  animation: pulse 2s ease-out;
  -webkit-animation-iteration-count: infinite;
  -moz-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  z-index: 1;
  opacity:...

JavaScript

$(function() {

			var pointHeight = $(".center #point").height() - $(".center #point").height() * 2;

			var controller = new ScrollMagic.Controller({addIndicators: false});

			var setTrigger = new ScrollMagic.Scene({triggerHook: 0})
						.setTween(TweenMax.to("#pulse_ball", 0, {top: "200px"}))
						.setPin("#pulse_ball")
						.addTo(controller);

			var moveTrigger = new ScrollMagic.Scene({triggerHook: 0, duration: 50})
						.setTween(TweenMax.fromTo("#pulse_ball", 1, {top: "200px"}, {top: "48%", ease: Linear.easeNone}))
						.addTo(controller);

			$('.point').each(function() {
				new ScrollMagic.Scene({triggerElement: this, triggerHook: 0.5, offset: pointHeight})
				.setTween(TweenMax.fromTo(this, 1, {opacity: 1}, {opacity: 0}))
				.addTo(controller);
			});

			$('.timeline-item').each(function() {
				if ($(this).parent().hasClass('left')) {
					var tween = new TimelineMax()
					.fromTo($(this).find(".event_line img"), 1, {css: {"padding-left": "100%"}}, {css: {"padding-left": "0"}}, 0)
					.fromTo($(this).find(".event"), 1, {opacity: 0}, {opacity: 1}, 1);
				} else if ($(this).parent().hasClass('right')) {
					var tween = new TimelineMax()
					.fromTo($(this).find(".event_line img"), 1, {css: {"margin-left": '-100%', 'padding-right':'100%'}}, {css: {"margin-left": 0}}, 0)
					.fromTo($(this).find(".event"), 1, {opacity: 0}, {opacity: 1}, 1);
				}

				new ScrollMagic.Scene({triggerElement: this, triggerHook: 0.5, offset: 0})
							.setTween(tween)
							.addTo(controller);
			});
              
				$("h3#1980").offset({top: $("#section1").position().top - 25});
				centerLine();

			$( window ).resize(function() {
				centerLine();
			});

			function centerLine() {
				$("#center_line").height($("body").height());
				$("#center_line").offset({left: $("body").width() / 2 - 1});
			}
		});