` tag.
For example, in your HTML, it would look like this:
<h2 class="title-section w-100">
New
<span class="marked">Section</span>
</h2>
***
5. How to Apply Animations to Elements:
* In the HTML, simply add the `data-animation` attribute to the element you want to animate, and assign the animation name.
For example:
```html
New
Section
```
* The available animations in your template are defined in the CSS using `@keyframes` to create transformation and opacity transitions, as shown below:
```css
/*==== Text and heading animations ====*/
.slide-up {
animation: slide-up 1s ease forwards;
}
.slide-right {
animation: slide-right 1s ease forwards;
}
.slide-left {
animation: slide-left 1s ease forwards;
}
/* Keyframes */
@keyframes slide-up {
from {
transform: translateY(20%);
opacity: 0;
}
to {
transform: translateY(0);
opacity: 1;
}
}
@keyframes slide-right {
from {
transform: translateX(5%);
opacity: 0;
}
to {
transform: translateX(0);
opacity: 1;
}
}
@keyframes slide-left {
from {
transform: translateX(-5%);
opacity: 0;
}
to {
transform: translateX(0);
opacity: 1;
}
}
```
Each animation has a set duration and transition type (e.g., `ease`, `forwards`) to control the timing and end state of the animation.
Ensure that the HTML elements you want to animate have the appropriate `data-animation` attribute.
* The animations are controlled by the `app.js` file located in the `js` folder. This script ensures that the correct animation is applied when the `data-animation` attribute is detected in the HTML.
***
6. How to Apply Animations Using the Intersection Observer:
Certain elements in the template are animated when they come into view, thanks to the Intersection Observer. These animations are triggered by adding either the `animated-up` or `animated-scale` class to an element.
**HTML Structure**
To animate an element, simply add the `animated-up` or `animated-scale` class to it. For example:
```html
```
**CSS Animations**
The `animated-up` and `animated-scale` classes are defined in the CSS to create the animations. When the element enters the viewport, these classes are animated with transitions for opacity and transform:
```css
/* Observer animations */
.animated-up {
opacity: 0;
transform: translateY(80px);
transition: opacity 0.5s ease, transform 0.5s ease;
}
.animated-up.animated-up-item {
opacity: 1;
transform: translateY(0);
}
.animated-scale {
opacity: 0;
transform: scale(0);
transition: opacity 0.5s ease, transform 0.5s ease;
}
.animated-scale.animated-scale-item {
opacity: 1;
transform: scale(1);
}
```
**JavaScript (Intersection Observer)**
The Intersection Observer in your `app.js` file handles the detection when an element with the `animated` or `animated-scale` class comes into view. When the element is visible, the observer adds the `animated-item` or `animated-scale-item` classes to trigger the animation:
```javascript
// Observer
document.addEventListener("DOMContentLoaded", () => {
const animatedItem = document.querySelectorAll(".animated");
const animatedScale = document.querySelectorAll('.animated-scale')
const observer = new IntersectionObserver(
(entries) => {
entries.forEach((entry, index) => {
if (entry.isIntersecting) {
setTimeout(() => {
entry.target.classList.add("animated-item");
entry.target.classList.add("animated-scale-item");
}, index * 100);
} else {
entry.target.classList.remove("animated-item");
entry.target.classList.remove("animated-scale-item");
}
});
},{
threshold: 0.1,
}
);
animatedScale.forEach(item => observer.observe(item));
animatedItem.forEach(item => observer.observe(item));
});
```
This script ensures that elements with the `animated` or `animated-scale` class are animated when they are scrolled into view. The `setTimeout` with the `index * 100` adds a slight delay to each element to make the animations appear sequentially.
