` 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.
---
# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.
## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter:
```
GET https://niaxus.gitbook.io/rosure/setup-and-configuration/images-and-media/interactive-blocks.md?ask=
```
The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.