HTML Code Editor
Copy Code
Copied
x
1
<style>
2
.homepage {
3
background-color: #ff2500;
4
}
5
</style>
6
7
<script>
8
$('.button').on('click', function() {
9
$(this).toggleClass('active');
10
});
11
</script>
12
13
<h2 class="heading-large">Section Heading</h2>
14
<p class="paragraph-small">Paragraph content for this section</p>
15
CSS Code Editor
Copy Code
Copied
xxxxxxxxxx
12
1
.no-click {pointer-events: none;}
2
.clickable {pointer-events: auto;}
3
4
.button:hover .button_underline {
5
width: 100%;
6
}
7
8
h2 {
9
font-color: #ff2500;
10
font-size: 3em;
11
}
12
JavaScript Code Editor
Copy Code
Copied
xxxxxxxxxx
16
1
gsap.from(".heading .char", { opacity: 0, yPercent: 100, stagger: 0.1 });
2
3
let tl = gsap.timeline({
4
scrollTrigger: {
5
trigger: ".section",
6
start: "top top",
7
end: "bottom bottom",
8
scrub: true,
9
onComplete: () => {
10
console.log("scroll finished");
11
}
12
}
13
});
14
tl.to(".circle", { borderRadius: 0, scale: 1 });
15
tl.to("body", { backgroundColor: "#000" });
16