How to use scrollRevealJS alongside AnimateCSS?

I love both the scrollRevealJS and AnimateCSS libraries for animations, however, I would like to use them both on one element. For example, I have a div <div class="animated fadeInDown" data-sr='enter top reset'>Lorem Ipsum</div>. For some reason, adding the Animate CSS classes animated fadeInDown ignores scrollReveal's data attribute. How am I able to use both the classes and data attributes of both libraries?

EDIT: I forgot to mention that I have the following style applied:

[data-sr] { visibility: hidden; }

scrollreveal.js not working on smaller screens

Edit

After looking at the github readme file from the developer, I was able to find the answer. I could script in var config = { vFactor: 0.60 } to fine tune when the effect should start. Providing a lower vFactor value triggers the event sooner.

I'm able to get ScrollReveal to work just fine on screens with large dimensions (1920 x 1080). The effect is for elements to enter the screen from the left and right when scrolling down.

On Smaller screens, I have to scroll far past the div/area for the script to kick in.

Can someone help me configure my code so the script timing is correct on generic notebook screens (1500px width or less)? I sort of suspect that the scroll timing might be off on laptop sized screens because I've written in a media query that sets the zoom on screens 1500px or less to 65%. If possible, I'd like to keep things this way.

Side note- I'm not interested in mobile responsiveness for the script at the moment.

ScrollReveal.js not working on Safari with

I'm currently using ScrollReveal.js to make a bunch of tiny pixelated boxes do random things when scrolled upon, with the following code:

var index=0;
$(document).ready(function(){
    jQuery('.pixel-box').each(function() { //each tiny box has class pixel-box
        var directions =[ 'left', 'right', 'top', 'bottom']

        index += 1

        var currentElement = $(this);
        var randEffect = getRandomInt(0,1);
        var randTime = getRandomArbitrary(1, 3.5);
        var randDirection = getRandomInt(0,3);

        if(randEffect == 0){
            var rand = getRandomInt(-360, 360);
            $(this).attr('data-sr', 'wait .5s, enter ' + directions[randDirection] + ', flip ' + rand + 'deg, over '+ randTime +'s');
    }
        else if(randEffect == 1){
            // move 24px
             var rand = getRandomInt(10, 120);
            $(this).attr('data-sr', 'wait .5s, enter ' + directions[randDirection] +', move '+ rand + 'px, over '+ randTime +'s');
        }


        if(index == 81){
             window.sr = new scrollReveal();
        }
    });
});

It's working perfectly on Chrome, but on Safari, the behavior is extremely clunky and not what I want. Would you or anyone else have any insights as to why this is happening?

To illustrate, here's what it looks like on Chrome:

https://gyazo.com/4f51ff8279cf5a76ad3ab38a680ae2af

Here's what it looks like on Safari:

https://gyazo.com/8c30e489a2470ac415da3dde1d95d4ef

For reference, one of these boxes is being rendered using the HTML code:

<rect class="pixel-box" id="Rectangle-167-Copy-7" fill="#FDD93D" filter="url(#filter-35)" x="823.65422" y="188.994877" width="16.675" height="19.0983607"></rect>

I suspect that the problem may be due to inconsistencies with CSS transformations and SVG elements like <rect> and <path> across different browsers, but I haven't been coming up with much.

Fade and animate objects on scroll in body and in modal

I wanted to have a scrollReveal on the main page as well as a modal, using bootstrap and Julian Lloyd's scrollReveal.js, but I can't get it to work :(

Something to do with the DOM changing in the instance of the body and separately for the position:fixed modal.

I have tried changing the instance on .click for the ID of the modal

window.sr = new scrollReveal();
$(function() {           
  $(".btn").click(function() { 
    window.sr = new scrollReveal({
    viewport: document.getElementById("myModal")
    });
  });
});

FIDDLE

I have tried creating two separate instances for body and modal

window.srBody = new scrollReveal();
window.srModal = new scrollReveal({
      viewport: document.getElementById( 'myModal' )
});

FIDDLE

But no cigar so far... I'm just not experienced enough in JavaScript... Anyone got an ideas?!

Random color for div tag generated by jquery is not permanent

My goal is to each div with a class of "random-color" to have a random background color.that generates the random color using jquery is also working properly . Only problem is after 2 seconds it disappears. Here's my code: I have the Script here from the post Random Div Color.Please fix the problem.

var colors = ['red', 'green', 'blue', 'orange', 'yellow'];
$(document).ready(function() {
    $(".random-color").each(function() {
        $(this).css('background-color', colors[Math.floor(Math.random() * colors.length)]);
    });
});

window.sr = new scrollReveal();

div {
  height: 40px;
  padding: 10px;
  text-align: center;
  margin-bottom: 10px;
}
#d1 {
  background-color: #00A388;
}
#d2 {
  background-color: #FFFF9D;
}
#d3 {
  background-color: #BEEB9F;
}
#d4 {
  background-color: #79BD8F;
}

<script src="http://scrollrevealjs.org/js/scrollReveal.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>

<body>

  <p data-sr>Scroll Reveal-Default</p>


  <!--Enter Properties The enter keyword controls the vector origin (direction) of your animation.-->
  <!-- Reveal with a downward motion -->
  <div class="random-color" data-sr='enter top'>enter top</div>
  <br>

  <!-- The other accepted values... -->
  <div class="random-color" data-sr='enter left'>enter lef</div>
  <br>
  <div class="random-color" data-sr='enter right'>enter right</div>
  <br>
  <div class="random-color" data-sr='enter bottom'>enter bottom</div>
  <br>
  <!--Enter Properties Ends-->

  <!--Move Properties The move keyword controls the distance (in pixels) traveled during animation.-->
  <div class="random-color" data-sr='move 24px'>move 24px</div>
  <!--Enter Properties Ends-->
  Over The over keyword sets the duration (in seconds) of your animation.

  <div class="random-color" data-sr='over 0.6s'>over 0.6s</div>
  <div class="random-color" data-sr='over 1.3s'>over 1.3s</div>
  Flip The flip keyword is a rotation keyword, controlling rotation along the X axis (pitch).

  <div class="d1" data-sr="enter left, hustle 20px">enter left, hustle 20px</div>
  <div class="d2" data-sr="wait 2.5s, ease-in-out 100px">wait 2.5s, ease-in-out 100px</div>
  <div class="d3" data-sr="move 16px scale up 20%, over 2s">move 16px scale up 20%, over 2s</div>
  <div class="d4" data-sr="enter bottom, roll 45deg, over 2s">enter bottom, roll 45deg, over 2s</div>


</body>

</html>