CodeMirror

HTML Code Editor

Copy Code

Copied

<style>
.homepage {
  background-color: #ff2500;
}
</style>

<script>
$('.button').on('click', function() {
  $(this).toggleClass('active');
});
</script>

<h2 class="heading-large">Section Heading</h2>
<p class="paragraph-small">Paragraph content for this section</p>

CSS Code Editor

Copy Code

Copied

.no-click {pointer-events: none;}
.clickable {pointer-events: auto;}

.button:hover .button_underline {
	width: 100%;
}

h2 {
	font-color: #ff2500;
  	font-size: 3em;
}

JavaScript Code Editor

Copy Code

Copied

gsap.from(".heading .char", { opacity: 0, yPercent: 100, stagger: 0.1 });

let tl = gsap.timeline({
  scrollTrigger: {
    trigger: ".section",
    start: "top top",
    end: "bottom bottom",
    scrub: true,
    onComplete: () => {
      console.log("scroll finished");
    }
  }
});
tl.to(".circle", { borderRadius: 0, scale: 1 });
tl.to("body", { backgroundColor: "#000" });