Animate Elements Reveal on Scroll – T-scroll

The T-scroll is a modern reveal-on-scroll javascript library which included 45 useful different options and animations. It can be applied to any DIV or image element and when the user scrolls down to the page, the animations effect will reveal.

Let’s make your site element more beautiful by adding reveal on scroll animation. The plugin gives you a lot of options and functions which are easy to apply to any element.

How to Animate Elements When Scroll Down

First, add the both JS and CSS file in the head tag.

<link type="text/css" rel="stylesheet" href="./public/theme/css/t-scroll.min.css">
<script type="text/javascript" src="./public/theme/js/t-scroll.min.js"></script>

Set the HTML. You can add text or image if you like.

<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>
</div>

Call the Javascript function. If you want more then one effect and want to apply different animation on the different section then you can define each function separately.

<script type="text/javascript">
	Tu.tScroll({
		't-element': '.bounceOut'
	})
	Tu.tScroll({
		't-element': '.section-gray .zoomOut',
		't-duration': 0.5
	})
	Tu.tScroll({
		't-element': '.section-gray .zoomOut',
		't-duration': 0.5
	})
	Tu.tScroll({
		't-element': '.title .slideDown',
		't-duration': 0.1,
		't-delay': 0.5
	})
	Tu.tScroll({
		't-element': '.bounceOut',
		't-duration': 1,
		't-position': 150
	})
</script>

You have 45+ different animation and you can choose which you want to add into element using CSS class.

Animation Classes to Reveal Elements

• 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

Here are all the possible options which you can use while init the function.

• t_elemet: It is target element
• t_animate: Set different type of animation
• t_show: timeout in seconds
• t_position: Default: 0
• t_delay: Set delay time
• t_infinite: loop animations?
• t_function: linear ease ease-in ease-out ease-in-out step-start step-end initial inherit