Jifunze jinsi ya kufanya website yako kuwa interactive na za kisasa kwa kutumia JavaScript animation libraries kama GSAP na Anime.js. Libraries hizi hutoa njia rahisi na yenye nguvu ya kuunda animations za smooth, scalable, na responsive bila kutumia CSS pekee.

Mfano wa Code:

<!DOCTYPE html>
<html lang="sw">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JS Animation Libraries Example</title>
<style>
.box {
width: 100px;
height: 100px;
background-color: #3498db;
margin: 50px;
}
</style>
</head>
<body>

<h2>GSAP & Anime.js Animation</h2>

<div class="box" id="box"></div>

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

<script>
// GSAP Example
gsap.to("#box", {duration: 2, x: 300, rotation: 360, scale: 1.5, repeat: -1, yoyo: true});

// Anime.js Example
anime({
targets: '#box',
translateY: 200,
rotate: '1turn',
duration: 3000,
direction: 'alternate',
loop: true
});
</script>

</body>
</html>


Maelezo ya Code:

GSAP: gsap.to() inabadilisha properties za element kwa muda fulani. Hapa, box inasogea, inazunguka, na inakua na kupungua (scale) mara kwa mara (repeat: -1 na yoyo: true).

Anime.js: anime({}) inafanya animation tofauti ya translate na rotate, yenye loop isiyoisha.

Libraries hizi zinarahisisha animations ambazo kwa CSS pekee zingekuwa ngumu.

🔗 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