A modern reveal-on-scroll library with useful options and animations. (Animate Elements On Reveal)
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.
.github Added .github/ISSUE_TEMPLATE.md (optional) Jun 18, 2017
html update fix uncompatible with IE Jul 13, 2018
public/theme update link for file package with webpack devDependencies Apr 24, 2018
theme update fix uncompatible with IE Jul 13, 2018
.editorconfig deploy first-commit May 12, 2017
.gitignore update clear file into project Jul 19, 2017
CODE_OF_CONDUCT.md Create CODE_OF_CONDUCT.md Jul 3, 2017
CONTRIBUTING.md Added CONTRIBUTING.md (optional) Jun 18, 2017
README.md update code project and clean public folder Jul 3, 2017
_config.yml update fix uncompatible with IE Jul 13, 2018
gulpfile.js update code project and clean public folder Jul 3, 2017
package.json update fix uncompatible with IE Jul 13, 2018


enter image description here

NPM version Downloads Backers on Open Collective Sponsors on Open Collective

Quick start t-scroll

  • Clone the repo: git clone git@github.com:crazychicken/t-scroll.git
  • Install with npm: npm install --save-dev t-scroll
  • Install with npm: npm install --save-dev crazychicken/t-scroll
  • Or download the latest release



Demo Options




How to use

  • First, include CSS files into your HTML head:
<link type="text/css" rel="stylesheet" href="./public/theme/css/t-scroll.min.css">
  • Include file t-scroll.min.js into the footer.
<script type="text/javascript" src="./public/theme/js/t-scroll.min.js"></script>
  • Set HTML
<div class="zoomIn">"..."</div>
<div class="zoomIn">"..."</div>
  • If you need setTimeout, you need insert the container attribute data-t-show="..."
<div class="zoomIn" data-t-show="1">"..."</div>
<div class="zoomIn" data-t-show="2">"..."</div>
  • Or you want to data-t-show run see first screen. You have to add .t-animated
<div class="box-center">
    <div class="zoomIn t-animated" data-t-show="1"> ... </div>
    <div class="zoomIn t-animated" data-t-show="2"> ... </div>

Call the function

<script type="text/javascript">
      't-element': '.zoomIn'

Options t-animate

  • bounceIn
  • bounceOut
  • bounceUp
  • bounceDown
  • bounceLeft
  • bounceRight
  • fadeIn
  • fadeUp
  • fadeDown
  • fadeLeft
  • fadeRight
  • fadeUpBig
  • fadeDownBig
  • fadeLeftBig
  • fadeRightBig
  • flip
  • flipX
  • flipY
  • lightSpeedUp
  • lightSpeedRight
  • lightSpeedDown
  • lightSpeedLeft
  • rollUp
  • rollRight
  • rollDown
  • rollLeft
  • rotate
  • rotateUpLeft
  • rotateUpRight
  • rotateDownLeft
  • rotateDownRight
  • slideUp
  • slideDown
  • slideLeft
  • slideRight
  • zoomIn
  • zoomInUp
  • zoomInLeft
  • zoomInDown
  • zoomInRight
  • zoomOut
  • zoomOutUp
  • zoomOutLeft
  • zoomOutDown
  • zoomOutRight


  └── theme/
      └── css/
      |   └── t-scroll.min.css
      └── js/
            └── t-scroll.min.js
  ├── // All Folders Sass Files
  └── t-scroll.min.scss // @import 'path sass file your project';

Template full feature list

  • Semantically Correct / Valid HTML Code
  • HTML5, CSS3
  • Javascript / JS6
  • Full project and seed project (build with: Gulp, Sass, Javascript, Npm, Babel)
  • Cross browser compatible ( Internet Explorer 10+, Firefox, Safari, Opera, Chrome etc. )
  • W3C Valid source code, properly formatted and commented
  • Animations CSS3


Tuds - Crazychicken (CLGT Groups)


This project exists thanks to all the people who contribute. [Contribute].


Thank you to all our backers! 🙏 [Become a backer]


Support this project by becoming a sponsor. Your logo will show up here with a link to your website. [Become a sponsor]

Copyright and license

Code and documentation copyright 2017, MIT license.