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>
<script>
	// init controller
	var controller = new ScrollMagic.Controller();
</script>
 

<div class="spacer s2"></div>

<div class="spacer s2"></div>

<div id="trigger1" class="spacer s0"></div>
<div id="animate1" class="box2 skin">
    <a href="/request-a-quote" class="services_cta_button">Request a quote</a>
</div>
<div class="spacer s2"></div>
<div class="spacer s2"></div>

CSS

.spacer.s1 {
    min-height: 100px;
}
.spacer.s0 {
    min-height: 1px;
}
.spacer.s2 {
    min-height: 200px;
}
.box2 {
    display: inline-block; 
    margin: 0 auto; 
    text-align: center; 
    padding: 20px; 
    border-radius: 10px;  
}
.box2 a {
    color: #FFF; 
    text-decoration: none; 
    margin: 0 auto; 
}

.skin {
    background-color: #ED9F4C;
}

JavaScript

jQuery(document).ready(function($){ // Simple Tweening Animation

	
		// build scene
		var scene = new ScrollMagic.Scene({
							triggerElement: "#trigger1"
						})
						.setTween("#animate1", 0.5, {backgroundColor: "red", scale: 1.5}) // trigger a TweenMax.to tween
				//		.addIndicators({name: "1 (duration: 0)"}) // add indicators (requires plugin)
						.addTo(controller);


});