Introduction

ScrollReveal.js is a javascript resource for animating objects as they appear in the viewport. I wanted to make a proof of concept and see if it can work together with SAPUI5.

Here a link to the ScrollReveal library webpage also implementing it's own library:

https://scrollrevealjs.org/

Using ScrollReveal

First you have to include the javascript with the library with:

<scriptsrc="https://cdn.jsdelivr.net/scrollreveal.js/3.0.9/scrollreveal.min.js"></script>

One way to make it work is apply a class to an element in HTML

<!-- HTML -->
<divclass="foo"> Foo </div>
<divclass="bar"> Bar </div>

Start ScrollReveal and apply the reveal method to the required classes.

// JavaScript
window.sr=ScrollReveal();
sr.reveal('.foo');
sr.reveal('.bar');

With that you will implement an animation to the <div> when it enters into the screen when scrolling.

Here the official help:

jlmakes/scrollreveal.js - JavaScript - GitHub

Implement on SAPUI5

We have to be sure that SAPUI5 elements are already loaded when reveal method is called, so we will do it when document is ready and we will apply the reveal to all elements with class "foo".

$('document').ready(function(){      window.sr = ScrollReveal();      sr.reveal( '.foo', { delay: 500, scale: 0.9, opacity: 0.1 } );
});

Here an example of a SAPUI5 Panel

You have some panels and when you scroll down and panels enter into screen, they are shown with an animation. You have to check the working example but here a screenshot of a panel making a fade in when you scroll down.

You can see a working example in the following jsbin.

https://jsbin.com/hiyiyo/edit?html,output

Conclusion

This was only a test for me if an external library canwork with SAPUI5. What I mean is that I'm not using ScrollReveal in a productive tool but could be a starting poing to someone who starts playing with ScrollReveal and SAPUI5.