Levento

Levento is a lightweight JavaScript animation library that lets you create smooth and customizable animations using only a few lines of code. Perfect for adding interactivity and motion to your website without relying on bulky frameworks.

---

🚀 Features

• Lightweight and fast
• Zero dependencies
• Easy to use and customize
• Includes built-in animation shortcuts (translate, scale, opacity, rotate, and more)

---

📦 Installation

Include the levento.js file in your HTML:

<script src="dist/levento.js"></script>
<script>
  Levento.Translate('#myElement');
</script>

---

🔧 Usage

Basic animation:

Vento.animate("#myElement", {
  translateX: 100,
  translateY: 50,
  scale: 1.2,
  opacity: 0.5,
  rotate: 180,
  duration: 1000,
  easing: "ease-in-out"
});

Parameters:

• selector: CSS selector for the element(s)
• translateX, translateY: pixels to move along X/Y axis
• scale: zoom level (default 1)
• opacity: value from 0 to 1
• rotate: degrees to rotate
• duration: animation duration in milliseconds
• easing: one of linear, ease-in, ease-out, ease-in-out

---

✨ Built-in Effects

These methods are shortcuts for common animations.

🔁 Simple Animations

Vento.simpleTranslate("#box"); // Move 200px in X
Vento.simpleScale("#box");     // Scale to 1.5x
Vento.simpleOpacity("#box");   // Change opacity to 0.5
Vento.simpleRotate("#box");    // Rotate 360 degrees

🌫️ Fade

Vento.fadeIn("#box", 1000);     // Fade in to opacity 1
Vento.fadeOut("#box", 1000);    // Fade out to opacity 0

🏀 Bounce & Pulse

Vento.bounce("#box", 1000);     // Quick bounce up
Vento.pulse("#box", 1000);      // Pulse (scale up briefly)

↔️ Slide

Vento.slideIn("#box", "left", 300, 1000);  // Slide in from left
Vento.slideOut("#box", "left", 300, 1000); // Slide out to left

😵 Shake

Vento.shake("#box", 500);       // Shake left and right

💡 Glow

Vento.glow("#box", 1000);        // Temporary glow effect

🔄 Flip

Vento.flip("#box", 1000);        // Flip in Y-axis

🤪 Jiggle

Vento.jiggle("#box", 1000);      // Small random shake

🔍 Zoom

Vento.zoom("#box", 1000);        // Zoom in then back out

---

🧪 Demo

Use the included index.html file to try all the animations with live boxes and buttons.

---

📁 Project Structure

levento-animation.zip
├── dist/
│   └── levento.js
│   └── levento.min.js
├── src/
│   └── levento.js
├── index.html
├── README.md
├── Documentation.pdf
├── package.json

---

📜 License

MIT License © 2025 Levento