I'm thinking OS have Animate Item for each item.

And If you want to customize it, I think you can set Animate Items to NO, then add a class "reveal-on-scroll " and custom CSS for it. 

Alternatively, you can also use JavaScript.

 I hope this helps.

Huy Hoang. 

Hello,

Adding to Huy's explanation regarding JavaScript, most of the animations that you require outside of OutSystems can be done using JS libraries or jQuery. I, for example, used animation for my personal portfolio, but this is within OutSystems itself, which is fade-in/fade-out:

https://personal-zaqcf0md.outsystemscloud.com/PersonalPortofolio_UI/Sherif_ElHabibi

As for the scroll, I was using another library called AOS: https://michalsnik.github.io/aos/

For this old one: https://sherifelhabibi.github.io/Portofolio/

So overall, there is flexibility in doing that. For the recommendation you asked it depends on the library itself, its documentation, and its potential pitfalls.

Hello,

Traditional Web does not have a built-in “reveal on scroll” feature, so the recommended approach is to combine lightweight CSS animations with minimal JavaScript. The animation itself should always be handled by CSS (for example, opacity and translateY transitions), since this is the most performant and avoids blocking the main thread.

JavaScript is only used to detect when a block enters the viewport and to add a CSS class that triggers the animation. Where browser support allows, IntersectionObserver is the preferred solution because it is efficient and does not run logic on every scroll event. If you must support older browsers, a throttled scroll handler using getBoundingClientRect can be used as a fallback.

In OutSystems, it’s best to keep the viewport detection logic at the screen level and let repeated blocks remain purely presentational. Each block should expose a stable CSS class or ID, and the animation should run only once when the element becomes visible.

For long lists, avoid animating large numbers of items at once. Pagination or progressive loading is strongly recommended, especially for mobile, to prevent scroll jank and performance degradation.

Hi @Wei Sheng Pang 

pls place the following JavaScript in the Screen’s On Ready event to trigger reveal-on-scroll animations for elements with the reveal-item class

const items = document.querySelectorAll(".reveal-item");

const observer = new IntersectionObserver(

  (entries, obs) => {

    entries.forEach(entry => {

      if (entry.isIntersecting) {

        entry.target.classList.add("revealed");

        obs.unobserve(entry.target);

      }

    });

  },

  { threshold: 0.2 }

);

items.forEach(item => observer.observe(item));

Hello everyone,

Following up on my earlier thread about scroll-triggered animations. Thank you everyone for suggesting the AOS library and other approach. I've attempted to implement with the AOS library but the result is a completely blank/empty list.

Here are my exact implementation steps in ODC:

1. Added the AOS library @Shingo Lam :

   • JavaScript: Added https://cdnjs.cloudflare.com/ajax/libs/aos/2.3.4/aos.js to my Screen's Required Scripts property.
     

   • CSS: Added @import url("https://cdnjs.cloudflare.com/ajax/libs/aos/2.3.4/aos.css"); to my Theme's Style Sheet.
     

2. Initialized AOS (Screen's OnReady event, JavaScript node) @Vijay Malviya 

   :

3. 
   

4. Applied CSS Classes:

   • Added the reveal-item class to the Extended Class property of each Block inside my List widget.

   • 

The Problem: The list content is not visible at all (appears blank).