How to apply simple animations in OutSystems for fading or sliding elements into view?

Applying Simple Animations in OutSystems for Fading or Sliding Elements into View

 

Adding basic animations such as fading or sliding elements into view can enhance the user interface of your OutSystems applications. This step-by-step guide demonstrates how you can implement these animations to create a more dynamic and visually appealing experience.

 

Prerequisites

 

• An OutSystems account along with a project where you want to implement animations.
• Basic understanding of OutSystems including elements, containers, and screen design.
• Familiarity with CSS and JavaScript as we'll use them for custom animations.

 

Understanding Animation in OutSystems

 

• OutSystems allows customization through CSS and JavaScript to create animations.
• Animations can help draw attention to specific elements or guide users through a process.

 

Creating Basic CSS for Fade In and Slide In Animations

 

• Navigate to the "Interface" tab in your OutSystems project.
• Open the "Styles" section where you can define custom CSS.
• Add the following CSS styles for fade in and slide in animations:

      /_ Fade In Animation _/
      .fade-in {
        opacity: 0;
        transition: opacity 1s ease-in-out;
      }
  
  .fade-in.in-view {
    opacity: 1;
  }
  
  /_ Slide In Animation _/
  .slide-in {
    transform: translateX(-100%);
    transition: transform 1s ease-in-out;
  }
  
  .slide-in.in-view {
    transform: translateX(0);
  }
  </pre>
  
    

• The classes "fade-in" and "slide-in" handle the animations, while the "in-view" class triggers the animation.

 

Applying Animations to Elements

 

• Identify elements on your screen to which you wish to apply animations.
• Add the CSS class "fade-in" or "slide-in" to your chosen elements in the properties panel.
• Ensure every animated element initially uses its base class (like "fade-in" or "slide-in") without "in-view".

 

Triggering Animations on Page Load or Scroll

 

• To trigger animations when elements come into view, use JavaScript to detect when they're visible on the screen.
• Include the following script in your page to monitor scrolling and apply the "in-view" class: