JSFiddle - React, Tailwind, and code Playground

by Clare12345

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.16.0/TweenMax.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.3/ScrollMagic.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.3/plugins/animation.gsap.min.js"></script>
<link rel="stylesheet" href="http://janpaepke.github.io/ScrollMagic/css/style.css">
<link rel="stylesheet" href="http://janpaepke.github.io/ScrollMagic/css/examples.css">
<div class="spacer s2"></div>
<div id="trigger" class="spacer s0"></div>
<div id="target" class="box1 blue">
	<p>I feel dizzy.</p>
	<a href="#" class="viewsource">view source</a>
</div>
<div class="spacer s3"></div>

CSS

/* .target {
 height: 600px;    
} */
/* .trigger {
 height: 600px;    
} */
.s3 {
 height: 600px;    
}
.s2 {
   height: 600px;    
}

JavaScript

jQuery(document).ready(function($){ // Dizzy
	$(function () { // wait for document ready
		// init controller
		var controller = new ScrollMagic.Controller();

		// build tween
		var tween = TweenMax.to("#target", 1, {rotation: 360, ease: Linear.easeNone});

		// build scene
		var scene = new ScrollMagic.Scene({triggerElement: "#trigger", duration: 300})
						.setTween(tween)
						.setPin("#target", {pushFollowers: false})
						.addIndicators() // add indicators (requires plugin)
						.addTo(controller);
		
		// init options
		$("input#duration").val(scene.duration());
		$("input#offset").val(scene.offset());
		$("input#triggerElement").val("#" + scene.triggerElement().getAttribute("id"));
		$("input#triggerHook").val(scene.triggerHook());
		$("input#reverse").prop("checked", scene.reverse());
		$("input#tweenChanges").prop("checked", scene.tweenChanges());

		$("div.slider+input").change(); // trigger change to init sliders.

		// form actions
		// update on change
		$("form #options input:not(#triggerElement)").on("change", function (e) {
			var
				val = $(this).is("[type=checkbox]") ? $(this).prop("checked") : $(this).val(),
				property = $(this).attr("id");
			scene[property](val);
		});
		// actions
		$("form #actions input[type=checkbox]").on("change", function (e) {
			var
				active = $(this).prop("checked"),
				type = $(this).attr("id");
			if (type == "tween") {
				if (active) {
					scene.setTween(tween);
				} else {
					scene.removeTween(true);
				}
			} else if (type == "pin") {
				if (active) {
					scene.setPin("#target", {pushFollowers: false});
				} else {
					scene.removePin(true);
				}
			} else if (type == "enabled") {
				scene.enabled(active);
			}
		});
		// update triggerElement
		$("form #options button[name=triggerElement]").on("click", function (e) {
			e.preventDefault();
			var
				selector = $.trim($("input#triggerElement").val());
			if (selector === "") {
				scene.triggerElement(null);
			} else if...