Animate Elements On Reveal – t-scroll

Preview:

Description:

The t-scroll JavaScript library lets you apply more than 45 pretty cool animations to any elements when they appear in the viewport.

How to use it:

Install it via NPM and import the t-scroll into your web project.

$ npm install t-scroll

Or include the t-scroll’s JavaScript and CSS files on the html page as this:

<link rel="stylesheet" href="/path/to/t-scroll.min.css">
<script src="/path/to/t-scroll.min.js"></script>

Add an animation of your choice to the element using CSS class. All available animations:

1. bounceIn
2. bounceOut
3. bounceUp
4. bounceDown
5. bounceLeft
6. bounceRight
7. fadeIn
8. fadeUp
9. fadeDown
10. fadeLeft
11. fadeRight
12. fadeUpBig
13. fadeDownBig
14. fadeLeftBig
15. fadeRightBig
16. flip
17. flipX
18. flipY
19. lightSpeedUp
20. lightSpeedRight
21. lightSpeedDown
22. lightSpeedLeft
23. rollUp
24. rollRight
25. rollDown
26. rollLeft
27. rotate
28. rotateUpLeft
29. rotateUpRight
30. rotateDownLeft
31. rotateDownRight
32. slideUp
33. slideDown
34. slideLeft
35. slideRight
36. zoomIn
37. zoomInUp
38. zoomInLeft
39. zoomInDown
40. zoomInRight
41. zoomOut
42. zoomOutUp
43. zoomOutLeft
44. zoomOutDown
45. zoomOutRight

<div class="zoomIn">Element 1</div>
<div class="bounceIn">Element 2</div>

Initialize the t-scroll to animate the elements when they come into view.

Tu.t_scroll({
  't_element': '.bounceIn'
})

Sometimes you might need to set a timeout to the animation:

<div class="bounceIn" t_show="1">Element</div>

All possible options which can be passed during init.

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

Changelog:

• v1.1.10 (07/13/2018)

  update fix incompatible with IE