JSFiddle - React, Tailwind, and code Playground

HTML

<h1 data-srBody="enter top move 50px over 1s reset">Defaultcanvas modal</h1>
<h3 data-srBody="wait 1s and enter right 150px over 1s reset">Scroll down to reveal elements</h3>
<hr>
<!-- Button trigger modal -->
<button data-srBody="enter bottom move 50px over 1s reset" type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
  Launch demo modal
</button>
                    <hr class="">
                    <p style="color:red;">The scrollReveal is instantiated at the end of the JavaScript... what I don't know haw to do is have scrollReveal active in both the html DOM and the modal DOM?!?!</p>
                        <hr>
                    <p>Use this area of the page to describe the pannel. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl u</p>
                    <p>Use this area of the page to describe the pannel. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl u</p>
                    <div class="row">
                      <div class="col-md-6 col-xs-6" data-srBody="enter left move 50px over 1s reset">
                        <h2 class="">Oh yeah, it's that good. <span class="text-muted">See for yourself.</span></h2>
                        <p>Donec ullamcorper nulla non metus auctor fringilla. Vestibulum id ligula porta felis euismod semper. Praesent commodo cursus magna, vel scelerisque nisl consectetur. Fusce dapibus, tellus ac cursus commodo.</p>
                      </div>
                      <div class="col-md-6 col-xs-6" data-srBody="enter right move 50px over 1s reset">
                        <img class=" img-responsive"...

CSS

body {
    margin:20px;
}

JavaScript

/*
                       _ _ _____                      _   _
                      | | |  __ \                    | | (_)
    ___  ___ _ __ ___ | | | |__) |_____   _____  __ _| |  _ ___
   / __|/ __| '__/ _ \| | |  _  // _ \ \ / / _ \/ _` | | | / __|
   \__ \ (__| | | (_) | | | | \ \  __/\ V /  __/ (_| | |_| \__ \
   |___/\___|_|  \___/|_|_|_|  \_\___| \_/ \___|\__,_|_(_) |___/ v2.1.0
                                                        _/ |
                                                       |__/

============================================================================*/

/**
 * scrollReveal.js (c) 2014 Julian Lloyd ( @julianlloyd )
 *
 * Licensed under the MIT license
 * http://www.opensource.org/licenses/mit-license.php
 */

window.scrollReveal = (function( window ) {

  'use strict'

  var _requestAnimFrame
    , extend
    , handler
    , self

  function scrollReveal( config ) {

    self         = this
    self.elems   = {}
    self.serial  = 1
    self.blocked = false
    self.config  = extend( self.defaults, config )

    if ( self.isMobile() && !self.config.mobile || !self.isSupported() ) {
      self.destroy()
      return
    }

    if ( self.config.viewport == window.document.documentElement ) {

      window.addEventListener( 'scroll', handler, false )
      window.addEventListener( 'resize', handler, false )

    } else self.config.viewport.addEventListener( 'scroll', handler, false )

    self.init( true )
  }

  scrollReveal.prototype = {

    defaults: {

      enter:    'bottom',
      move:     '8px',
      over:     '0.6s',
      wait:     '0s',
      easing:   'ease',

      scale:    { direction: 'up', power: '5%' },

      opacity:  0,
      mobile:   false,
      reset:    false,
      viewport: window.document.documentElement, // <HTML> element by default.

      /**
       *        'always' — delay every time an animation resets
       *        'once'   — delay only the first time an animation reveals
       *       ...