26
Views
15
Comments
Solved
How to Use Library AOS for reactive web?
Question

can explain how to use it? 

2025-02-07 09-54-44
Sivasakthi Munusamy
Solution

Hi @Reynal Novriadi ,

Can you elaborate your question.

If you meant Animate on scroll javascript library Please refer the below steps.

1.Go to "Interface" → Click on "Theme" (Main Theme or Layout)

2.In the Style Sheet (CSS) section, add:

@import url("https://cdnjs.cloudflare.com/ajax/libs/aos/2.3.4/aos.css");

3.In the JavaScript section, add:

<script src="https://cdnjs.cloudflare.com/ajax/libs/aos/2.3.4/aos.js">

when users scroll down the page, elements will animate smoothly .

Kindly try and let me know the update.

UserImage.jpg
Reynal Novriadi

3.In the JavaScript section, add:

is this what you mean??

UserImage.jpg
Reynal Novriadi

please check my oml, the animation doesn't work

kkkk.oml
2025-02-07 09-54-44
Sivasakthi Munusamy

Hi @Reynal Novriadi ,

Follow the given URL in browser and copy the code and  try by adding them Under the scripts folder of the interface tab.

https://cdnjs.cloudflare.com/ajax/libs/aos/2.3.4/aos.js

use that script  under required script section in your corresponding screen.

UserImage.jpg
Reynal Novriadi


I have added it but the animation is not working, is there a solution for this?

2022-12-30 07-28-09
Navneet Garg
Solution

you need to add 

AOS.init(); onready event of the screen

UserImage.jpg
Reynal Novriadi

the animation only on screen page, not fullpage, how to fix that? and the animation when im scrolling nothing happen

2025-02-07 09-54-44
Sivasakthi Munusamy
Solution

Hi @Reynal Novriadi ,

Can you elaborate your question.

If you meant Animate on scroll javascript library Please refer the below steps.

1.Go to "Interface" → Click on "Theme" (Main Theme or Layout)

2.In the Style Sheet (CSS) section, add:

@import url("https://cdnjs.cloudflare.com/ajax/libs/aos/2.3.4/aos.css");

3.In the JavaScript section, add:

<script src="https://cdnjs.cloudflare.com/ajax/libs/aos/2.3.4/aos.js">

when users scroll down the page, elements will animate smoothly .

Kindly try and let me know the update.

UserImage.jpg
Reynal Novriadi

3.In the JavaScript section, add:

is this what you mean??

UserImage.jpg
Reynal Novriadi

please check my oml, the animation doesn't work

kkkk.oml
2025-02-07 09-54-44
Sivasakthi Munusamy

Hi @Reynal Novriadi ,

Follow the given URL in browser and copy the code and  try by adding them Under the scripts folder of the interface tab.

https://cdnjs.cloudflare.com/ajax/libs/aos/2.3.4/aos.js

use that script  under required script section in your corresponding screen.

UserImage.jpg
Reynal Novriadi


I have added it but the animation is not working, is there a solution for this?

2024-12-18 16-06-42
Junaid Syed

Hello Reynal,

What are you referring to here by AOS? Are you referring to application objects? There is a forge component for that having sufficient documentation.

https://www.outsystems.com/forge/component-overview/4242/application-objects-count-o11

Hope it helps!

Junaid

UserImage.jpg
Reynal Novriadi

i mean like animation container when we scroll it


2024-12-18 16-06-42
Junaid Syed

Ok, in that case I think you have sufficient suggestions to try out from other members.

2023-11-22 10-51-50
Jozy Sohail

Hi Reynal,

are you referring to AOS (Animate On Scroll) ?

if yes, then first you need to download and include AOS library in outsystems resources fileor use the JS like below
<link rel="stylesheet" href="/<path-to-uploaded-aos.css>" /> <script src="/<path-to-uploaded-aos.js>"></script>    -----> add this in JS node

 then you need to initialize it using the JS node
AOS.init({  

duration: 1000, 
 easing: 'ease', 
 once: true       // Animation happens only once when scrolling

}); 

 and then you can use the AOS attributes in attribute section of the container.

hope it helps,

UserImage.jpg
Reynal Novriadi

please check my oml, whats wrong with my code, can help me, im only want the animation like the original, so only need AOS.init();

2022-12-30 07-28-09
Navneet Garg
Solution

you need to add 

AOS.init(); onready event of the screen

UserImage.jpg
Reynal Novriadi

the animation only on screen page, not fullpage, how to fix that? and the animation when im scrolling nothing happen

2022-12-30 07-28-09
Navneet Garg

You got the solution ? I think there is some css of outsystems which is creating issue.

https://github.com/michalsnik/aos/issues/775


2022-12-30 07-28-09
Navneet Garg

If you got the solution please share with me as well.

Thanks

UserImage.jpg
Reynal Novriadi

the problem is with css scroll, where the library only detects scroll on the window, while the default scroll is from the .screen container class. Is there a solution?


Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.