Jifunze jinsi ya kuunda animations zinazochochewa na scroll kwenye website yako. Hii inafanya tovuti yako kuwa interactive na inavutia watumiaji kwa kuonyesha elements zinapopatikana kwenye viewport wakati wanapopiga chini. Tunaweza kutumia GSAP ScrollTrigger au Intersection Observer API.

Mfano wa Code (GSAP ScrollTrigger):

<!DOCTYPE html>
<html lang="sw">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Scroll-Triggered Animation</title>
<style>
.section {
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
font-size: 2rem;
background-color: #f2f2f2;
margin-bottom: 20px;
opacity: 0;
transform: translateY(50px);
transition: all 0.6s ease-out;
}
</style>
</head>
<body>

<div class="section">Sehemu 1</div>
<div class="section">Sehemu 2</div>
<div class="section">Sehemu 3</div>

<!-- GSAP & ScrollTrigger -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js&quot;&gt;&lt;/script&gt;
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/ScrollTrigger.min.js&quot;&gt;&lt;/script&gt;

<script>
gsap.registerPlugin(ScrollTrigger);

gsap.utils.toArray('.section').forEach(section => {
gsap.fromTo(section,
{opacity: 0, y: 50},
{
opacity: 1,
y: 0,
scrollTrigger: {
trigger: section,
start: "top 80%", // inafanya animation ikifika 80% ya viewport
end: "bottom 60%",
toggleActions: "play none none reverse"
},
duration: 1
}
);
});
</script>

</body>
</html>


Maelezo ya Code:

.section ina opacity 0 na translateY 50px mwanzoni.

GSAP ScrollTrigger inachunguza wakati section inapoingia kwenye viewport na inaipeleka kwenye animation (fade-in na slide-up).

toggleActions: "play none none reverse" inachagua tabia wakati element inapoingia na kutoka viewport.

🔗 Links Za Kujifunza Zaidi:
🌐 Faulink Official Website:
https://www.faulink.com/

📘 Jifunze Web Design & Programming (Tutorials / Mifumo):
https://www.faulink.com/excel_mifumo.php

📲 Piga / WhatsApp kwa msaada wa haraka:
https://wa.me/255693118509