RevealFrom

Reveal From Left

Reveal From Right

Reveal From Bottom

Reveal From Top

Reveal From Flip

Reveal From Zoom

Documentation

Add CSS CDN

Add Js CDN

Please make sure that your section has this two css property:( max-width: 100%; and overflow-x: hidden; )

Note: Please be careful to use margin or padding in section element. It might be overflow.

Then call this function

Simple Example

<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
  <meta charset="utf-8">
  <title>Your Website Title</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/revealfrom@1.4.0/revealfrom.css">
  <style media="screen">
    section {
      width: 100%;
      max-width: 100%;
      overflow-x: hidden;
      background: #f3f3f3;
    }
    h2{
      margin:150px;
    }
  </style>
</head>
<body>

  <section>
    <div class="revealfrom left">
      <h2>Hello World</h2>
    </div>
  </section>

  <script src="https://cdn.jsdelivr.net/npm/revealfrom@1.4.0/revealfrom.js"></script>

  <script type="text/javascript">
    window.addEventListener('load', (event) => {
     revealfrominit()
    });
  </script>

</body>
</html>

npm install

Available classes

Available delay time

Want custom delay time? declare css like below then use it

Give a Star on Github

A lightweight Js library to reveal element on scroll.

Make awesome transition with delay

Transition with bounce

Documentation