Skip to Content


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:



<script src="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 -->

<div class="foo"> Foo </div>

<div class="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.


/wp-content/uploads/2016/01/scrollreveal_870487.png


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 can work 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.

To report this post you need to login first.

Be the first to leave a comment

You must be Logged on to comment or reply to a post.

Leave a Reply